回忆之前回到顶部效果，为了增加用户的体验效果，回到顶部时是先快后慢。有了前面的基础，这里句很好办了，以demo1为例，我们可以添加如下代码：
function startMove(iTarget){ var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget - oDiv.offsetLeft)/20; speed = speed>0?Math.ceil(speed):Math.floor(speed); //注意这里的取整问题，不然运动后回不到原来的位置 // if(speed > 0){ // speed = Math.ceil(speed); // } // else{ // speed = Math.floor(speed); // } if(iTarget == oDiv.offsetLeft){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) }
在这段代码中，var speed = (iTarget - oDiv.offsetLeft)/20;通过控制被除数可以控制动画的速度，然后我们分别用Math.floor和Math.ceil分别进行向下和向上取整，如果没用取整，那么鼠标移入和移出都达不到想要的效果（计算机在进行计算时总是有误差的）。到这里，缓冲运动也介绍的差不多了。下面我们来介绍多物体运动。
3、多物体运动
有了前面的基础，我们来看多物体运动时就觉得简单了。在多物体运动中，我们将宽度变化和透明度变化分开来讲
【多物体宽度变化】
在多物体宽度变化中，我们用无序列表来实现。与单个物体宽度变化不同的是，我们要用for循环依次遍历我们想要的值，关键代码如下：
var aLi = document.getElementsByTagName('li'); for(var i = 0; i< aLi.length; i++){ //i=0 aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } }
全代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多物体动画</title> <style type="text/css"> body,ul,li{ margin: 0px; padding: 0px; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; } </style> <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i = 0; i< aLi.length; i++){ //i=0 aLi[i].timer = null; aLi[i].onmouseover = function(){ startMove(this,400);//this指向当前的aLi[i].onmouseover事件 } aLi[i].onmouseout = function(){ startMove(this,200);//this指向当前的aLi[i].onmouseout事件 } } } //var timer = null; /* * 若该代码还是在这里，当鼠标依次缓慢经过时不会出现大的问题，但是当移动的速度比较快时，会发现有问题：可以变得越来越宽 * 原因：timer并不是每次在鼠标经过每一个区域时为null * 解决办法：在前面的for循环中加上aLi[i].timer = null;这样每次执行前都是null开始 */ function startMove(obj,iTarget){//因为li有多个，这里需要再传一个参数obj //var aLi = document.getElementsByTagName('li'); clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(iTarget == obj.offsetWidth){ clearInterval(obj.timer); } else{ obj.style.width = obj.offsetWidth+speed+'px'; //是obj 不是 aLi } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
【多物体透明度动画】
有了上面的例子，我们就能很容易的写出多物体透明度动画的代码，代码如下：