本文實例分析了js實現的多個物體運動功能。分享給大家供大家參考，具體如下：
與單個的區別：得知道哪個在動，所以運動函數需要兩個參數，出了目標iTarget之外，還要obj。另外需要多個計數器，否則當一個還沒運動完就移入另一個物體會發生卡殼
window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++){ aDiv[i].timer=null; aDiv[i].onmouseover=function(){ startMove(this,300); }; aDiv[i].onmouseout=function(){ startMove(this,100); }; } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iSpeed=(iTarget-obj.offsetWidth)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //凡是要用緩沖運動，肯定缺不了取整，為了讓他能到目的點（不然無法完全貼合） if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); } else{ obj.style.width=obj.offsetWidth+iSpeed+'px'; } },30); };};注：多物體運動，所有東西都不能公用
屬性與運動對象綁定：速度、其他屬性值（如透明度等）
offsetWidth、offsetHeight、offsetLeft、offsetHeight都有一個bug，拿offsetWidth舉例，他除了width還包括padding和border，比如div寬度為100，還有一像素邊框，現在讓div運動，div.style.width=div.offsetWidth-1+'px'，沒有邊框的的情況下他會一直縮小直到消失，有邊框的情況。width:100px,offsetWidth:102px >>>>>width:101px,offsetWidth:103px，會使得他不斷變大
解決辦法：
用 currentStyle div.style.width=parseInt(getStyle(div,'width'))-1+'px' getStyle是自己封裝好的獲取樣式的函數，里面包括currentStyle方法。parseInt解析字符串返回整數。
擴展(任意值變化)：
用同一套運動框架使得一個物體變寬，一個變高，一一個透明度變化
window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; aDiv[0].onmouseover=function(){ startMove(this,'width',300); }; aDiv[0].onmouseout=function(){ startMove(this,'width',100); }; function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }; function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var iCur=parseInt(getStyle(obj,attr)); var iSpeed=(iTarget-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //凡是要用緩沖運動，肯定缺不了取整，為了讓他能到目的點（不然無法完全貼合） if(iCur==iTarget){ clearInterval(obj.timer); } else{ obj.style[attr]=iCur+iSpeed+'px'; } },30); };};這套運動框架還有個問題，透明度沒支持
1.
var iCur=parseInt(getStyle(obj,attr));
opacity取到的都是零點幾，parseInt取整，所以opacity永遠是0，應改為
if(attr=='opacity'){ var iCur=parseFloat(getStyle(obj,attr))*100; //為了其他程序不用修改，這里統一乘100}else{ var iCur=parseInt(getStyle(obj,attr));}2.
obj.style[attr]=iCur+iSpeed+'px';
按現在寫法就是
aDiv.style.opacity=50px;
應改為
if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100;}else{ obj.style[attr]=iCur+iSpeed+'px'}3.計算機內部，都是模擬的來存儲小數，不是實際來存儲，最簡單的例子
alert(0.07*100); //輸出并不是7，而是7.0000...001，不止7，很多數字（小數）都有問題
所以var iCur=parseFloat(getStyle(obj,attr))*100;就會出問題（會閃爍），解決方法就是避免使用小數
var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
