js--链式缓冲运动框架

浏览数：213 / 时间：2015年06月09日

这些框架都是鄙人自学的网上视频，至于是哪家，想必大家都知道的，当然不纠结这个，最主要的是学习的过程和结果，甚至于你理解，掌握了没有

网上有很多的开源框架，很佩服他们的思路和写法，或许这就是代码之美吧

我一个小小的前台，做界面的，现在也要去学习设计思路了，毕竟你拿工资的多少和你掌握技能的多少、深度是成正比的

当然更要相信

努力必有回报，坚持一定成功

以下是更新的学习运动框架的进度和代码

更新时间:2014-12-11

js框架---缓冲链式运动--已经掌握

 1     //运动框架
 2     //author:Nomand
 3     //2014-12-11
 4     //兼容各中内核浏览器
 5     //解决了webkit核心下的浏览器小数的问题
 6     function getStyle(obj,attr){
 7         return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
 8     }
 9     function startMove(obj,attr,iTarget,fn){
10         clearInterval(obj.time);
11         var iCur = 0;
12         obj.time=setInterval(function() {
13             attr == ‘opacity‘ ? iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100) : iCur = parseInt(getStyle(obj, attr));
14             var speed = (iTarget - iCur) / 8;
15             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
16             if (iCur == iTarget) {
17                 clearInterval(obj.time);
18                 if(fn) {
19                     fn();
20                 }
21             } else {if(obj.style.opacity == (iCur + speed) / 100){
22                         iCur +=1;
23                     }
24                 //这里是解决在webkit下小数问题，当浏览器认为他到达的时候事实上并没有到达，这里直接给他加上1
25                 if(obj.style.opacity == (iCur + speed) / 100){
26                     iCur +=1;
27                 }
28                 attr == ‘opacity‘ ? obj.style.opacity = (iCur + speed) / 100 : obj.style[attr] = iCur + speed + "px";
29             }
30         },20)
31     }

js框架--完美运动（尚未掌握），需要仔细学习

 1 function startMove(obj, json, fnEnd)
 2 {
 3     if(obj.timer)
 4     {
 5         clearInterval(obj.timer);
 6     }
 7     obj.timer=setInterval(function (){
 8         doMove(obj, json, fnEnd);
 9     }, 30);
10     
11     var oDate=new Date();
12     
13     if(oDate.getTime()-obj.lastMove>30)
14     {
15         doMove(obj, json, fnEnd);
16     }
17 }
18 
19 function getStyle(obj, attr)
20 {
21     if(obj.currentStyle)
22     {
23         return obj.currentStyle[attr];
24     }
25     else
26     {
27         return getComputedStyle(obj, false)[attr];
28     }
29 }
30 
31 function doMove(obj, json, fnEnd)
32 {
33     var iCur=0;
34     var attr=‘‘;
35     var bStop=true;    //假设运动已经该停止了
36     
37     for(attr in json)
38     {
39         if(attr==‘opacity‘)
40         {
41             iCur=parseInt(100*parseFloat(getStyle(obj, ‘opacity‘)));
42         }
43         else
44         {
45             iCur=parseInt(getStyle(obj, attr));
46         }
47         
48         if(isNaN(iCur))
49         {
50             iCur=0;
51         }
52         
53         var iSpeed=(json[attr]-iCur)/8;
54         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
55         
56         if(parseInt(json[attr])!=iCur)
57         {
58             bStop=false;
59         }
60         
61         if(attr==‘opacity‘)
62         {
63             obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
64             obj.style.opacity=(iCur+iSpeed)/100;
65         }
66         else
67         {
68             obj.style[attr]=iCur+iSpeed+‘px‘;
69         }
70     }
71     
72     if(bStop)
73     {
74         clearInterval(obj.timer);
75         obj.timer=null;
76         
77         if(fnEnd)
78         {
79             fnEnd();
80         }
81     }
82     
83     obj.lastMove=(new Date()).getTime();
84 }