具体代码如下:
function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) {return obj.currentStyle[attr];} else {return getComputedStyle(obj,false)[attr];} } //运动 clearInterval(obj.timer); obj.timer=setInterval(function(){ var isAllCompleted=true; //假设全部运动都完成了 for(attr in json){ var attrValue=0; switch(attr){ case 'opacity': attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break; default: attrValue=parseInt(getStyle(obj,attr)); } //默认速度4 var speed=(json[attr]-attrValue)/(sv||4); speed=speed>0?Math.ceil(speed):Math.floor(speed); //如果循环过程中存在尚未结束的运动,isAllCompleted为假 if(attrValue!=json[attr]) isAllCompleted=false; switch(attr){ case 'opacity': { obj.style.filter="alpha(opacity="+(attrValue+speed)+")"; obj.style.opacity=(attrValue+speed)/100; }; break; default:obj.style[attr]=attrValue+speed+'px'; } }//for in end! //所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器 if(isAllCompleted){ clearInterval(obj.timer); if(fnEnd) fnEnd(); } },30); }
运动框架 : move(obj,propertiesJson,speed,fnCallBack)
obj: 运动物体
propertiesJson: 运动属性和运动目标值的json集合,{'opacity':100}
speed: 运动的速度,speed-value,值越小速度越大
fnCallBack: 运动结束后的回调函数
此框架可以实现多个参数,多个物体运动互不影响。