js运动框架

Posted 2020-09-22

 

//获取当前行间样式 && 非行间样式　
   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})
　　　　})
　　}