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/