首页 > 代码库 > js--链式缓冲运动框架

js--链式缓冲运动框架

2024-08-07 09:58:47   219人阅读

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

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

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

当然更要相信  

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

 

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

 

 

更新时间: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下小数问题，当浏览器认为他到达的时候事实上并没有到达，这里直接给他加上125                 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     else26     {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         else44         {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         else67         {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 }

 

js--链式缓冲运动框架


联系
我们