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);
}