js運動框架
阿新 • • 發佈:2017-06-11
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運動框架