码迷,mamicode.com
首页 > Web开发 > 详细

无限循环轮播图之运动框架(原生JS)

时间:2016-12-31 16:41:59      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:ret   lin   float   name   bsp   tin   div   break   else   

封装运动框架

 1 function getStyle(obj,name){
 2     if(obj.currentStyle){
 3         return obj.currentStyle[name];
 4     }else{
 5         return getComputedStyle(obj,false)[name];
 6     }
 7 }
 8 function move(obj,json,options){
 9     var options=options || {};
10     var duration=options.duration || 800;
11     var easing=options.easing || ‘linear‘;
12     var n=0;
13     var start={};
14     var dis={};
15     var count=Math.ceil(duration/30);
16     //{top:0,left:0}
17     for(name in json){
18         start[name]=parseFloat(getStyle(obj,name));
19         dis[name]=json[name]-start[name];
20     }
21 
22     clearInterval(obj.timer);
23     obj.timer=setInterval(function(){
24         n++;
25         for(name in json){
26             switch (easing){
27                 case ‘linear‘:
28                     var a=n/count;
29                     var cur=start[name]+dis[name]*a;
30                     break;
31                 case ‘ease-out‘:
32                     var a=1-n/count;
33                     var cur=start[name]+dis[name]*(1-a*a*a);
34                     break;
35                 case ‘ease-in‘:
36                     var a=n/count;
37                     var cur=start[name]+dis[name]*a*a*a;
38                     break;
39             }
40             if(name==‘opacity‘){
41                 obj.style[name]=cur;
42             }else{
43                 obj.style[name]=cur+‘px‘;
44             }
45         }
46         if(n==count){
47             clearInterval(obj.timer);
48             options.complete && options.complete();
49         }
50     },30);
51 }

 

无限循环轮播图之运动框架(原生JS)

标签:ret   lin   float   name   bsp   tin   div   break   else   

原文地址:http://www.cnblogs.com/NTWang/p/6239394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!