你的位置:首页 > Java教程

[Java教程]js缓冲运动代码实例


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/