本文實例分析了JS實現多物體運動的方法。分享給大家供大家參考，具體如下：
基本步驟
1.通過getElementsByTagName獲取到要做多物體運動的元素
2.然后for循環遍歷元素，添加事件
3.定義startMove函數，需要兩個參數，當前“做運動”的元素，和目標值target
注意問題：在多物體運動中，所有的東西不能公用；
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); // 第一步 for(var i=0;i<liTags.length;i++){ // 第二步 liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } var timer = null; function startMove(obj,iTarget) { // 第三步，2個參數 clearInterval(timer); timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 緩沖運動注意取整處理 if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); }</script>問題：
當移入移出速度比較快的時候，就會出現有的li回不到原來的樣子，卡在半路了；這是因為所有的li公用了一個定時器造成的；
當鼠標移入第一個li時，調用startMove開啟一個定時器；鼠標移除li時，也需要開啟一個定時器讓li回到原來的位置，li走到半路上，我們移入第二個li，首先會清除定時器，這時候第一個li就卡到半路了。
解決這個問題：讓每個li擁有自己的timer去控制他們的變化，在for循環的時候，給每個里定義自己的一個timer
liTags[i].timer = null;// 給每個li都添加一個timer
接著在starMove里面每次用的定時器都是當前li 自己的，就不會互相干擾了。
這里由之前的timer變成了obj.timer (當前對象自己的timer)；到這里就沒問題了。
完整代碼如下：
<body><ul> <li></li> <li></li> <li></li> <li></li></ul></body>
加點樣式：
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; background: lightblue; }</style>完整js代碼
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 給每個li都添加一個timer liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; 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); }</script>接著在看一個例子：多物體運動-改變透明度
<script> window.onload = function () { var aImgs = document.getElementsByTagName('img'); for(var i=0;i<aImgs.length;i++){ aImgs[i].timer = null; aImgs[i].alpha = 100; // 把公用的alpha改成每個img對象都有的屬性 aImgs[i].onmouseover = function () { startMove(this,30); } aImgs[i].onmouseout = function () { startMove(this,100); } } } // var alpha = 100; 這里alpha在多物體運動里 不能公用 function startMove(obj,iTarget) { clearInterval(obj.timer); var iSpeed = (iTarget - obj.alpha)/10; iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed); obj.timer = setInterval(function(){ if(obj.alpha == iTarget){ clearInterval(obj.timer); }else{ obj.alpha += iSpeed; obj.style.opacity =obj.alpha/100; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; } },30); }</script>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
