缓冲运动以及方法的封装

Posted xieyfwin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了缓冲运动以及方法的封装相关的知识,希望对你有一定的参考价值。

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

 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 */

 

以上是关于缓冲运动以及方法的封装的主要内容,如果未能解决你的问题,请参考以下文章

原生JavaScript运动功能系列:缓冲运动

缓冲运动的简单封装

缓冲运动的封装--简易.js

js的运动及封装

JavaScript 基础入门11 - 运动框架的封装

封装一个运动函数