当前位置:Gxlcms > JavaScript > JS实现多物体运动实例分享

JS实现多物体运动实例分享

时间:2021-07-01 10:21:17 帮助过:43人阅读

本文主要介绍了JS实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下,希望能帮助到大家,

基本步骤

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技巧

基于js匀速运动的实例讲解

两种JS实现小球抛物线轨迹运动的方法

以上就是JS实现多物体运动实例分享的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行