JS多物體運動的實現方法

這次帶給大家JS多物體運動的實現方法，JS多物體運動實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

基本步驟

1.透過getElementsByTagName取得到要做多物體運動的元素
2.然後for循環遍歷元素，加入事件
3.定義startMove函數，需要兩個參數，目前「做運動」的元素，和目標值target

# 注意問題：在多物體運動中，所有的東西不能公用；

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      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+&#39;px&#39;;
        }
      },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)；到這裡就沒問題了。

完整程式碼如下：

  
•   
•   
•   

加點樣式：

<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(&#39;li&#39;);
      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+&#39;px&#39;;
        }
      },30);
    }
</script>

接著在看一個例子：多物體運動-改變透明度

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    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 = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue路由在history模式下刷新時渲染頁面無反映的處理方法

vue. js實現無縫滾動效果的步奏詳解

#

以上是JS多物體運動的實現方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！