1.完美运动框架对于初学者来说,还是非常必要的,所以要好好分析。
2. 基础牢固者,尽量就不要看注释了,巩固复习旧知识!
function startMove(obj, json, time, fn)
{
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function()
{
var iBtn = true;
for(var attr in json)
{
var iTarget = json[attr];
if(attr == 'opacity')
{
iCur = Math.round(css(obj, 'opacity') * 100);
}
else
{
iCur = parseInt(css(obj, attr));
}
iSpeed = (iTarget - iCur) / time;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur != iTarget)
{
iBtn = false;
if(attr == 'opacity')
{
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
}
else
{
obj.style[attr] = iCur + iSpeed + 'px';
}
};
};
if(iBtn)
{
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
};
function css(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
};
3.复制以上代码保存为startMove.js脚本文件,导入html文档即可。
4.在需要使用的js代码中,调用startMove()这个方法,就可以了。例如:
window.onload = function () {
var aDiv = document.getElementById('box');
var aBtn = document.getElementsByTagName("button")[0];
aBtn.onclick = function () {
startMove(aDiv,{
left : 500,
width:1000,
opacity : 40
},30,function () {
alert("运动完毕!")
});
}
}