时间：2021-07-01 10:21:17 帮助过：5人阅读
本文实例分析了JS实现多物体运动的方法。分享给大家供大家参考，具体如下：
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target
注意问题：在多物体运动中，所有的东西不能公用；
问题：
当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；
当鼠标移入第一个li时，调用startMove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。
解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个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代码
接着在看一个例子：多物体运动-改变透明度
以上就是本篇文章的所有内容，希望对大家学习JavaScript提供到帮助！！
相关推荐：
JavaScript实现向select下拉框中添加和删除元素实例分享
javascript算法之二叉搜索树的示例代码
详谈javascript最长公共子序列
以上就是JS实现多物体运动的方法详解的详细内容，更多请关注Gxl网其它相关文章！