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

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

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

要点一：

rush:js;"> var speed = (target - obj.offsetWidth)/8;

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

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

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

要点二：

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

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

要点三：

rush:js;"> for(i=0; iSEOver = function(){ startrun(this,300); } runs_li[i].onmouSEOut = function(){ startrun(this,80); } }

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

最后，上代码：

rush:js;">

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