导航

完美运动框架

Posted on 2017-04-07 15:08  _兮夜  阅读(75)  评论(1)    收藏  举报 
 1 /**
 2  * 完美运动框架
 3  * Created by BanishXIYE on 2017/4/1.
 4  */
 5 function getStyle(obj, attr){
 6     if(obj.currentStyle){
 7         return obj.currentStyle[attr];
 8     }else{
 9         return getComputedStyle(obj, false)[attr];
10     }
11 }
12 
13 function startMove(obj, json, fn){
14     clearInterval(obj.timer);
15 
16     obj.timer=setInterval(function () {
17         for(attr in json) {
18             var iCurr = 0;
19             var bStop = true;
20 
21             if (attr == 'opacity') {    //如果属性值是opacity就调用这个条件语句
22                 iCurr = parseInt(parseFloat(getStyle(obj, attr)) * 100);
23             } else {
24                 iCurr = parseInt(getStyle(obj, attr));
25             }
26 
27             var iSpeed = (json[attr] - iCurr) /10;
28 
29             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
30 
31             if (iCurr != json[attr]) {
32                 bStop = false;
33             }
34 
35             if (attr == 'opacity') {
36                 obj.style.opacity = (iCurr + iSpeed) / 100;
37             } else {
38                 obj.style[attr] = iCurr + iSpeed + 'px';
39             }
40         }
41         if(bStop){
42             clearInterval(obj.timer);
43             if (fn) {
44                 fn();
45             }
46         }
47     },30)
48 }