缓冲运动以及方法的封装

Posted 2021-11-29 xieyfwin

缓冲运动：速度由快到慢的一种运动形式，常见于轮播图；现封装一个小插件，方便实现不同元素，实现不同样式的缓冲变化：

 1 //获取非行间样式
 2 function getStyle(ele,attr){
 3     return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
 4 }
 5 
 6 function move(ele,json,fn){      //json的接收  {width:10900} 
 7                                  //加入回调函数fn（结合开关门） 可以实现多个功能的有序实现
 8     //清除定时器
 9     clearInterval(ele.timer);
10     //开启定时器
11     ele.timer = setInterval(function(){
12         var mStop = true;
13         //遍历json
14         for(attr in json){
15             //获取变换的属性的值
16             var iCur = getStyle(ele,attr);
17             //判断是否为透明
18             if(attr == ‘opacity‘){
19                 iCur *= 100;
20             }else{
21                 iCur = parseInt(iCur);
22             }
23             //设置速度
24             var speed = (json[attr] - iCur) / 8;   //系数8可以更改为其他值,调整速度
25             //速度取整
26             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
27             //判断
28             if(iCur != json[attr]){
29                 mStop = false;
30             }
31             //运动的逻辑
32             if(attr == ‘opacity‘){
33                 ele.style.opacity = (iCur + speed) / 100;
34                 ele.style.filter = ‘alpha(opacity=‘+(iCur + speed)+‘)‘
35             }else{
36                 ele.style[attr] = iCur + speed + ‘px‘;
37             }
38         }
39 
40         if(mStop){
41             clearInterval(ele.timer);
42             if(fn){
43                 fn();
44             }
45         }
46     },30)
47 }
48 
49 //调用示例：
50 /*
51    move(div,{"width":"400","height":"400"},function(){
52        move(div,{"fontSize":"30"})
53    })
54 */