这次给大家带来JS多物体运动的实现方法，JS多物体运动实现的注意事项有哪些，下面就是实战案例，一起来看一下。
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target
注意问题：在多物体运动中，所有的东西不能公用；
window.onload = function(){ var liTags = document.getElementsByTagName('li'); // 第一步 for(var i=0;i0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理 if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); }
登录后复制
问题：
当移入移出速度比较快的时候，就会出现有的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)；到这里就没问题了。
完整代码如下：
登录后复制
加点样式：
ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; background: lightblue; }
登录后复制
完整js代码
window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); }
登录后复制
接着在看一个例子：多物体运动-改变透明度
window.onload = function () { var aImgs = document.getElementsByTagName('img'); for(var i=0;i0 ? 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); }
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue路由在history模式下刷新时渲染页面无反映的处理方法
vue.js实现无缝滚动效果的步奏详解
以上就是JS多物体运动的实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772996.html
