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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有