課程
/前端開發(fā)
/JavaScript
/JS動(dòng)畫效果
2729379229@qq.com
2016-03-22
源自:JS動(dòng)畫效果 6-2
正在回答
function startMove(obj,json,fn){?? ??? ?clearInterval(obj.timer);??????? obj.timer=setInterval(function(){??????????? var flag=true;??????? for(var attr in json){?????????? ???????? var icur=0;??????? if (attr=="opacity") {??????????? icur=Math.round(parseFloat(getStyle(obj,attr))*100);??????? }??????? else{?????? ??? ?icur=parseInt(getStyle(obj,attr));??????? }?????????? var speed=(json[attr]-icur)/8;?????????????? speed=speed>0?Math.ceil(speed):Math.floor(speed);????? ??? ?????? ??? ??????? ??? ?if(icur!=json[attr]){??????????????? flag=false;?????? ??? ?????????? ??? ??? ?if(attr=="opacity"){?????????????????? obj.style.filter="Alpha(opacity="+(icur+speed)+")";?????? ??? ??? ??? obj.style.opacity=(icur+speed)/100;? ??????? ??? ??? ???? }?????? ??? ??? ?else{?????? ??? ??? ?obj.style[attr]=icur+speed+"px";?????? ??? ?? }??????? if(flag){??????????? clearInterval(obj.timer);??????????? if(fn){??????????????? fn();??????????? }??????? }????? }??????? }????? },30)??? }??????? //獲取行內(nèi)元素??? function getStyle(obj,attr){??????? //針對(duì)IE瀏覽器??????? if(obj.currentStyle){??????????? return obj.currentStyle[attr];??????? }??????? //針對(duì)Firefox瀏覽器??????? else{??????????? return getComputedStyle(obj,false)[attr];??????? }??? }
舉報(bào)
通過本課程JS動(dòng)畫的學(xué)習(xí),從簡(jiǎn)單動(dòng)畫開始,逐步深入各種動(dòng)畫框架封裝
2 回答老師的完美運(yùn)動(dòng)框架有bug
9 回答關(guān)于完美運(yùn)動(dòng)框架小bug的修復(fù),附源碼
8 回答完美運(yùn)動(dòng)框架,不能實(shí)現(xiàn)鏈?zhǔn)竭\(yùn)動(dòng)哇!
2 回答完美框架代碼沒有效果,誰(shuí)能看看哪里錯(cuò)了
1 回答(不是問題)這是老師的運(yùn)動(dòng)框架源碼:
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-03-22
function startMove(obj,json,fn){
?? ??? ?clearInterval(obj.timer);
??????? obj.timer=setInterval(function(){
??????????? var flag=true;
??????? for(var attr in json){?????????? ?
??????? var icur=0;
??????? if (attr=="opacity") {
??????????? icur=Math.round(parseFloat(getStyle(obj,attr))*100);
??????? }
??????? else{
?????? ??? ?icur=parseInt(getStyle(obj,attr));
??????? }
?????????? var speed=(json[attr]-icur)/8;
?????????????? speed=speed>0?Math.ceil(speed):Math.floor(speed);????? ??? ?????? ??? ?
?????? ??? ?if(icur!=json[attr]){
??????????????? flag=false;
?????? ??? ?
????????? ??? ??? ?if(attr=="opacity"){
?????????????????? obj.style.filter="Alpha(opacity="+(icur+speed)+")";
?????? ??? ??? ??? obj.style.opacity=(icur+speed)/100;? ?
?????? ??? ??? ???? }
?????? ??? ??? ?else{
?????? ??? ??? ?obj.style[attr]=icur+speed+"px";
?????? ??? ?? }
??????? if(flag){
??????????? clearInterval(obj.timer);
??????????? if(fn){
??????????????? fn();
??????????? }
??????? }
????? }
??????? }
????? },30)
??? }
??????? //獲取行內(nèi)元素
??? function getStyle(obj,attr){
??????? //針對(duì)IE瀏覽器
??????? if(obj.currentStyle){
??????????? return obj.currentStyle[attr];
??????? }
??????? //針對(duì)Firefox瀏覽器
??????? else{
??????????? return getComputedStyle(obj,false)[attr];
??????? }
??? }