javascript实现的运动框架详解

2024-04-27 14:06:43

字体：大中小

来源：转载

供稿：网友

javascript实现的运动框架详解

Javascript实现的运动框架详解:

所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化。运动框架的使用在实际功能中有大量的应用，最常见的比如客服系统，当拖动滚动条的时候，一般客服系统能够以弹性方式跟随，下面就简单介绍一下如何实现此效果:

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/CSS">#mytest{  width:100px;  height:100px;  background-color:black;}</style><script type="text/javascript">function Move(obj,attr,iTarget){  clearInterval(obj.timer);  obj.timer=setInterval(function()  {    var cur=0;    if(attr=="opacity")    {      if('v' == '/v')      {        cur=parseInt(getStyle(obj,attr));      }     else     {        cur=Math.round(parseFloat(getStyle(obj,attr))*100);     }   }   else   {      cur=parseInt(getStyle(obj,attr));   }                     var speed=(iTarget-cur)/10;   speed=speed>0?Math.ceil(speed):Math.floor(speed);                 if(iTarget==cur)   {      clearInterval(obj.timer);   }   else   {      cur+=speed;      if(attr=="opacity")     {        obj.style.filter="alpha(opacity:"+cur+")"; //for IE        obj.style.opacity=cur/100;   //for FF      }     else     {        obj.style[attr]=cur+"px";      }    }  },30);}  function getStyle(obj,name){  if(obj.currentStyle)  {    return obj.currentStyle[name];//for IE  }  else  {    return getComputedStyle(obj,false)[name];//for FF  }}  window.onload=function(){  var mytest=document.getElementById("mytest");  Move(mytest,"width",200);}</script></head><body><div id="mytest">蚂蚁部落欢迎您</div></body></html>

在以上代码可以以缓冲的形式将div的宽度设置为200px。当然是用move函数几乎可以设置一个元素的任何属性。下面简单解释要一下如何实现此效果:

一.实现原理:

原来非常的简单，通过定时器函数setInterval()不断的调用一个函数以实现不间断的以不同的速度改变元素的属性值，最后达预定属性值。这样就实现了缓冲效果。

二.代码注释:

1.function Move(obj,attr,iTarget){}，声明一个函数，此函数实现了运动框架效果，此函数具有三个参数，obj是要操作的对象，attr表示要操作的属性值例如"width"，iTarget表示要达到的目标属性值。

2.clearInterval(obj.timer)，作用是关闭上一个上一个定时器，可以防止对对同一个元素同时使用多个定时器。

3.obj.timer=setInterval(function(){}，1000），定时器反复调用函数。

4.var cur=0,用来存储当前属性的值。

5.if(attr=="opacity"),判断要操作的属性是否是透明度。

6.if('v' == '/v'){}，由于IE8和IE8以下浏览器对透明度的处理和其他标准浏览器不一样，所以这里需要进行判断。

7. cur=Math.round(parseFloat(getStyle(obj,attr))*100)，针对在FF中opacity属性值为浮点数值问题，将属性值四舍五入、转换成浮点型。乘以100，使opacity属性值与IE统一为百分数。

8.var speed=(iTarget-cur)/10,创建递减的速度speed变量。实现属性值的变速改变。