js中完美运动框架

//多个值同时变化
function getStyle(obj, name)//函数帮助获取不在行间样式,不受非行间border,padding等得影响
{ //style只获取行间样式。offset受非行间border,padding等得影响
  if(obj.currentStyle)
  {
    return obj.currentStyle[name];
  }
  else
  {
    return getComputedStyle(obj, false)[name];
  }
}
//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd)//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);
}

posted @ 2017-12-09 09:33  梦想起航我起床  阅读(1133)  评论(0编辑  收藏  举报