JS實現多物體運動的方法詳解，js實現物體詳解

JS實現多物體運動的方法詳解，js實現物體詳解

本文執行個體分析了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>