js运动框架

JS运动框架实现

最新推荐文章于 2025-09-13 21:59:18 发布

转载最新推荐文章于 2025-09-13 21:59:18 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wrupei/p/6984734.html

文章标签：

#json

本文介绍了一个基于JavaScript的运动框架实现方法，包括获取元素样式、控制元素平滑移动到指定位置等功能。通过定时器和数学计算实现元素的渐进式移动效果。

//获取当前行间样式 && 非行间样式　
   function getStyle(obj, name)
   {
      if (obj.currentStyle)
      {
         return currentStyle[name]; 
      }  
      else
      {
         return getComputedStyle(obj, false)[name];
      }
   }


//运动框架
   function move(obj, json, fnEnd)
   {
      clearInterval(obj.timer) //每运动一次就清除一次定时器
      obj.timer=setInterval(function (){
         var bStop=true;  //假设：所有的值都到了

         for (var attr in json)
         {
            var cur=0;

            if (attr=='opacity')
            {
               cur=Math.round(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
               cur=parseInt(getStyle(obj, attr)); 
            }

            var speed=(json[attr]-cur)/6;

            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            if (cur!=json[attr])
            {
               bStop=false;   
            }

            if (attr=='opacity')
            {
               obj.style.filter='alpha(opacity:'+(cur+speed)+')';
               obj.style.opacity=(cur+speed)/100;
            }
            else
            {
               obj.style[attr]=cur+speed+'px';
            }
         }

         if (bStop)
         {
            clearInterval(obj.timer);

            if (fnEnd)fnEnd(); 
         }
      }, 30) 
   };
　　
　　var moveBox = document.getElementById('moveBox');
　　document.getElementById('click').onclick = function(){
　　　　move(moveBox,{left:300},function(){
　　　　　　move(moveBox,{top:300})
　　　　})
　　}