封装一个运动函数

 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){//{ width: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];}}

封装一个运动函数

猜你喜欢