标签：
js缓冲运动代码实例:
元素的缓冲运动效果要比匀速运动更为美观一些，因为显得更为有张力和弹性，当然对于浏览者来说可能会有更好的效果，那么留住用户的可能性也就更大，下面就通过代码实例简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div { width:100px; height:50px; background:#0000FF; margin:10px; } </style> <script type="text/javascript"> window.onload=function() { var oDiv=document.getElementsByTagName(‘div‘); for(var i=0;i<oDiv.length;i++) { oDiv[i].timer=null; oDiv[i].onmouseover=function() { move(this,400); } oDiv[i].onmouseout=function() { move(this, 100); } } }; function move(div,end) { clearInterval(div.timer); div.timer=setInterval(function(){ var speed=(end-div.offsetWidth) / 5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(div.offsetWidth==end) { clearInterval(div.timer); } else { div.style.width=div.offsetWidth+speed+‘px‘; } }, 30) } </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>
以上代码虽然不是div的运动，但是从div的长度变化依然可以看出缓冲效果，原理是一样的。
一.代码注释:
1.window.onload=function(){}，当稳当内容完全加载完毕再去执行函数中的代码。
2.var oDiv=document.getElementsByTagName(‘div‘)，获取div对象集合。
3.for(var i=0;i<oDiv.length;i++){}，遍历div对象集合中的每一个div对象。
4.oDiv.timer=null，为div对象自顶一个timer属性，并赋值为null，用于存放setInterval()函数的返回值。
5.oDiv.onmouseover=function(){move(this,400);}，为div对象注册onmouseover事件处理函数。
6.oDiv.onmouseout=function(){move(this,100);}，为div对象注册onmouseout事件处理函数。
7.function move(div,end) {}，此函数为缓冲运动的核心，具有两个参数，第一个参数是div对象，第二个是要设置的最终div长度。
8.clearInterval(div.timer)，停止当前div上定时器函数的运行，如果没有这段代码，可能会造成运动加速或者运动混乱的情况。
9.div.timer=setInterval(function(){},30),使用定时器函数每隔毫秒执行一次匿名函数。
10.var speed=(end-div.offsetWidth)/5，设置运动"速度"，这里所谓的速度其实就是宽度增加或者减少的幅度，随着运动的进行，speed的值也是在不断变化的。
11.speed=speed>0?Math.ceil(speed):Math.floor(speed)，是一个数学运算，这里就不介绍了。
12.if(div.offsetWidth==end){clearInterval(div.timer);},如果达到目标长度，就停止定时器函数的执行。
13.div.style.width=div.offsetWidth+speed+‘px‘，否则继续不断设置div的宽度。
二.相关阅读:
1.Math.ceil()函数可以参阅javascript的Math对象的ceil()方法一章节。
2.Math.floor()函数可以参阅javascript的Math.floor()方法一章节。
3.setInterval()函数可以参阅setInterval()函数用法详解一章节。
4.clearInterval()函数可以参阅window对象的clearInterval()方法一章节。
5.offsetWidth属性可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10780
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5150062.html
