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是小写的，千万别大写了。

秒客网

js动画---多物体运动

相关文章