【HTML】完美运动框架

最新推荐文章于 2024-08-04 21:23:42 发布

遊愙

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量478

点赞数

分类专栏： JavaScript 文章标签： html 完美运动

本文链接：https://blog.csdn.net/baidu_37639000/article/details/73825019

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

// 获取非行间样式
function getStyle(obj,styleName)
{
var speed=0;
if(obj.currentStyle){
return obj.currentStyle[styleName];
}else{
return getComputedStyle(obj,null)[styleName];
}
}

function move(obj,json,fn)
{     
  clearInterval(obj.timer);   
  obj.timer=setInterval(function()//开启定时器
  {
    var stop=true;  //注意一定要放入定时器内，否则stop赋值为false后死循环        
    for(var attr in json){
      var now=0;  //获取当前值
    if(attr=="opacity"){          
         now=Math.round(parseFloat(getStyle(obj,attr)*100 ) );
      }else{            
         now=parseInt(getStyle(obj,attr) );
       }                

       speed=(json[attr]-now)/10;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);   

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

      if(json[attr]!=now){
        stop=false;
      }
    } //json 循环结束
    if(stop){
      clearInterval(obj.timer);
    }

  },30); // 定时器结束
  if(fn) fn();
} // move 结束