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


posted @ 2016-01-10 09:01  秋天的故事  阅读(874)  评论(0编辑  收藏  举报