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

前端之家收集整理的这篇文章主要介绍了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

添加一个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); }

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章