1. 程式人生 > >js運動框架

js運動框架

js運動框架 pre cit for on() ren js運動 click n)

//獲取當前行間樣式 && 非行間樣式 
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})
    })
  }

js運動框架