JS实现多物体运动的方法详解

2019-11-19 14:29:19

字体：大中小

来源：转载

供稿：网友

本文实例分析了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程序设计有所帮助。

上一篇：简述vue中的config配置

下一篇：JS运动改变单物体透明度的方法分析