具体代码以下:json
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: 运动结束后的回调函数框架
此框架能够实现多个参数,多个物体运动互不影响。函数