javascript运动框架

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

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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">51前端欢迎您</div>
</body>
</html>

代码描述：javascript 运动框架。javascript运动框架

下载全部收藏

111 148

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册