本文實例分析了JS高級運動。分享給大家供大家參考，具體如下：
一、鏈式運動框架
1.他需要一個回調函數，在運動停止時，開始下一次運動（執行函數）
多物體運動框架改為如下：
function startMove(obj,attr,iTarget,fn){... if(iCur==iTarget){ clearInterval(obj.timer); fn(); }...};然后就可以用它，比如先變寬再變高最后變透明度
startMove(this,'width',300,function(){ startMove(this,'height',300,function(){ startMove(this,'opacity',100); });});二、完美運動框架
1.原本多物體運動框架的缺陷
比如要讓他寬度高度同時變300，這樣寫：
startMove(this,'width',300);startMove(this,'height',300);
問題：只有高度變300了（因為寬度準備運動時會開一個定時器，這個定時器還沒開始運動前，執行高度變化的運動，就把之前的定時器關了）
2.for in
for(i=0;i<=arr.length;i++)和for(i in arr)效果一樣
①什么時候用for什么時候用for...in呢？
數組：兩個都可以用 Json：只能用for...in（因為Json下標沒有規律，沒有length可言）
對數組而言for...in循環不靈活，因為for循環可以從1可以從2等等任意數字開始，而for...in一循環就全部
②for in小應用
function setStyle(obj,attr,value){ obj.style[attr]=value;};setStyle(oDiv,'width','300px');setStyle(oDiv,'height','300px');setStyle(oDiv,'background','green');=====>
function setStyle(obj,json){ var attr=''; for(attr in json){ obj.style[attr]=json[attr]; }};setStyle(oDiv,{width:'300px',height:'300px',background:'green'});③多物體運動框架改進
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ if(attr=='opacity'){ var iCur=parseInt(parseFloat(getStyle(obj,attr))*100); } else{ var iCur=parseInt(getStyle(obj,attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur==json[attr]){ clearInterval(obj.timer); if(fn){ fn(); //有傳函數這個參數才執行，不然會出錯 } } else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else{ obj.style[attr]=iCur+iSpeed+'px' } } } },30);};這樣還有個問題
if(iCur==json[attr]){ clearInterval(obj.timer);}只要json里有任一值到達目標，計時器就停止
比如我讓寬度變到103，高度變到300，那高度到不了300就停止了
解決方案
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var bStop=true; //先定義一個值，假設所有值都到了 for(var attr in json){ if(attr=='opacity'){ var iCur=parseInt(parseFloat(getStyle(obj,attr))*100); } else{ var iCur=parseInt(getStyle(obj,attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]){ bStop=false; //并不是所有值都到了，就把bStop設成 false } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else{ obj.style[attr]=iCur+iSpeed+'px' } } if(bStop){ //所有值都到了，關閉定時器 clearInterval(obj.timer); if(fn){ fn(); //有傳函數這個參數才執行，不然會出錯 } } },30);};更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
