本文实例分析了JS实现多物体运动的方法。分享给大家供大家参考,具体如下:
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素,添加事件
3.定义startMove函数,需要两个参数,当前“做运动”的元素,和目标值target
注意问题:在多物体运动中,所有的东西不能公用;
问题:
当移入移出速度比较快的时候,就会出现有的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代码
接着在看一个例子:多物体运动-改变透明度
更多关于Javascript相关内容感兴趣的读者可查看本站专题:《Javascript运动效果与技巧汇总》、《Javascript切换特效与技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》
希望本文所述对大家Javascript程序设计有所帮助。



