js实现同一页面多个运动效果的方法

本文实例讲述了js实现同一页面多个运动效果的方法。分享给大家供大家参考。具体分析如下：

实现原理，就是在调用的时候，给这五个元素，循环加上事件。需要注意的是，每个元素的定时器需要分开。

要点一：

var speed = (target - obj.offsetWidth)/8;

缓冲运动效果，一开始速度很快，然后越来越慢，直到停止

speed = speed>0?Math.ceil(speed):Math.floor(speed);

如果速度大于0，则向上取整，如果速度小于0，则向下取整。

要点二：

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}

元素宽度和目标值比较，如果相等，关闭定时器，否则，宽度继续增加。

要点三：

for(i=0; i

给每个元素加上各自的定时器属性，各自的鼠标事件，在鼠标事件中调用运动函数。
最后，上代码：







body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}





 
1
 
2
 
3
 
4
 
5




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