1 //支持 缓冲 + 多物体 + 链式 + 完美 2 //obj：运动的对象 3 //json:存储多个attr和target 4 //callback ：回调函数 代表一个功能 当一个函数作为参数时，这样的函数叫做回调函数 5 function startMove(obj,json,callback){ 6 clearInterval( obj.timer );//在运动之前先清空定时器 7 obj.timer = setInterval( function(){ 8 var flag = true;//假设值为true时 可以停止定时器了 9 for( var attr in json ){ 10 //获取实际样式值 11 var current = 0; 12 if( attr == "opacity" ){ 13 current = getStyle( obj , attr )*100; 14 }else if( attr == "zIndex" ){ 15 current = parseInt( getStyle( obj , attr ) ); 16 }else{ 17 current = parseInt( getStyle( obj , attr ) ); 18 } 19 //获取速度 20 var speed = (json[attr] - current)/10; 21 speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed ); 22 23 if( json[attr] != current ){ 24 flag = false;//假设不成立 25 } 26 //设置样式继续发生变化 27 if( attr == "opacity" ){ 28 obj.style[attr] = (current + speed)/100; 29 }else if( attr == "zIndex" ){ 30 obj.style[attr] = json[attr]; 31 }else{ 32 obj.style[attr] = current + speed + "px"; 33 } 34 } 35 36 //循环结束后 如果flag的值还是true 就可以停止定时器了 37 if( flag ){//判断结束条件 并设置样式 38 clearInterval( obj.timer ); 39 //上一个动作完成了 开始进入到下一个动作 40 //下一个动作不确定 此处有一个功能 是可变的 41 if( callback ){//如果用户传递了该参数 就执行下一个动作 42 callback(); 43 } 44 } 45 },30 ) 46 } 47 48 //封装一个获取非行内元素样式值的函数 49 function getStyle( obj ,attr ){ 50 if( getComputedStyle ){ 51 return getComputedStyle( obj,false )[attr]; 52 }else{ 53 return obj.currentStyle[attr]; 54 } 55 }
//支持 缓冲 + 多物体 + 链式 + 完美// obj ： 运动的对象 // json :存储多个attr和target//callback ：代表一个功能 一个函数 当一个函数作为参数时，这样的函数叫做回调函数//回调 ：回头再调用function startMove(obj,json,callback){//{ 3,height:200 }clearInterval( obj.timer );obj.timer = setInterval( function(){var flag = true;//假设值为true时 可以停止定时器了for( var attr in json ){//获取实际样式值var current = 0;if( attr == "opacity" ){current = getStyle( obj , attr )*100;}else if( attr == "zIndex" ){current = parseInt( getStyle( obj , attr ) );}else{current = parseInt( getStyle( obj , attr ) );}//获取速度var speed = (json[attr] - current)/10;speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );if( json[attr] != current ){flag = false;//假设不成立}//设置样式继续发生变化if( attr == "opacity" ){obj.style[attr] = (current + speed)/100;}else if( attr == "zIndex" ){obj.style[attr] = json[attr];}else{obj.style[attr] = current + speed + "px";}}//循环结束后 如果flag的值还是true 就可以停止定时器了if( flag ){//判断结束条件 并设置样式clearInterval( obj.timer );//上一个动作完成了 开始进入到下一个动作//下一个动作不确定 此处有一个功能 是可变的if( callback ){//如果用户传递了该参数 就执行下一个动作callback();}}},30 )}
//封装一个函数 功能是获取非行内元素样式值function getStyle( obj ,attr ){if( getComputedStyle ){return getComputedStyle( obj,false )[attr];}else{return obj.currentStyle[attr];}}