js动画---多物体运动
对于多物体运动和单个物体运动来说，没有特别大的区别，实现原理基本上是一样的，都是通过定时器来实现的，但是多物体有一些地方需要注意，具体哪些需要注意，我将在下面的程序中说明。
首先，我们需要建立几个li
<!DOCTYPE html> <html> <head> <title>js动画事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
然后，我们简单的对着几个里设置一下样式
*{ margin:0px; padding:0px; } li{ width:200px; height:100px; background-color:red; margin-bottom:30px; }
最后，我们来实现一下多物体运动
window.onload=function(){ var ls=document.getElementsByTagName("li"); for(var i=0,l=ls.length;i<l;i++){ ls[i].timer=null;//这一句是什么意思？其实这一句的作用是为每个元素设置一个定时器。 ls[i].onmouseover=function(){ startMove(this,400); } ls[i].onmouseout=function(){ startMove(this,200); } } } function startMove(object,Target){ clearInterval(object.timer); object.timer=setInterval(function(){ var speed=(Target-object.offsetWidth)/10; speed=speed>0? Math.ceil(speed):Math.floor(speed);//这个地方依然需要注意的。易错点 if(object.offsetWidth==Target){//这个地方容易出错，易错点。 clearInterval(object.timer); }else{ object.style.width=object.offsetWidth+speed+"px";//这个地方千万要注意小细节！！易错点！！！ } },50) }
上面我们为每个li都设置了一个定时器，因为我们的函数中有删除定时器，添加定时器，为了不让几个物体之间产生混乱，我们为每个li都添加定时器，这样会避免不必要的麻烦。
还有上面标注了三个易错点，我来讲述一下为什么是易错点，容易犯什么样的错误？
首先，这一句
speed=speed>0? Math.ceil(speed):Math.floor(speed);
我们一定要进行向上或者向下取整，为什么呢？因为如果我们不进行这些操作的话，到后来无法达到目标值（200,400），最终达到的是接近他们的值。第二，对于speed是正值的时候我们是向上取整，反之，负值时我们向下取整。
第二个易错点：
object.offsetWidth==Target
这一句话有什么问题呢？
其实这一句话是没有问题的，只不过要注意一点，我们有的人经常会写成这样object.style.width==target;这样就大错特错了，为什么呢？因为object.style.width只能进行赋值，不能获取元素的宽度值。
第三个易错点
object.style.width=object.offsetWidth+speed+"px";
这个易错点跟第二个易错点有点类似。
有的人会这样写object.style.width=object.style.width+speed+"px"或者 object.offsetWidth=object.offsetWidth+speed+"px";
这两句都不对，第一句是因为
object.style.width 是无法获得值的，所以 object.offsetWidth+speed+"px";这句话是没有意义的
其次第二句是因为 object.offsetWidth是无法进行赋值的，所以
object.offsetWidth="....",也是没有意义的
最后一个易错点是，object.style.width;这里面的width中的w是小写的，千万别大写了。
