动画的封装 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/tool.js" type="text/javascript">
 7             
 8         </script>
 9     </head>
10     <body>
11         
12         
13         <div>
14             
15         </div>
16     </body>
17 </html>
18 /*
19  var m = new Move();
20 //让谁动？
21 m.ele = box;
22 m.start = XX; //开始位置
23 m.target =XXX; 结束值
24 m.direction = "top"; //左右动无需给参数，上下给top
25 m.animation();  启动动画。
26  * */
27 function Move() {
28     this.ele = null;
29     this.start = 0;
30     this.target = 100;
31     this.speed = 10;
32     this.direction = "left";
33     this.offset = "offsetLeft";
34     this.animation = function() {
35         var o = this;
36         if(o.direction == "top") {
37             o.offset = "offsetTop"
38         }
39 
40         var step,
41             i = o.start,
42             timer,
43             current;
44 
45         function t() {
46             current = o.ele[o.offset];
47             step = (o.target - current) / o.speed
48             step = Math.ceil(step);
49             i += step;
50             if(Math.abs(i - o.target) < 5) {
51                 i = o.target;
52                 clearInterval(timer)
53             }
54             o.ele.style[o.direction] = i + "px";
55         }
56         timer = setInterval(t, 20);
57     }
58 
59 }

 

posted @ 2017-09-10 17:41  ︶ㄣ鳯躌氷瀚  阅读(123)  评论(0)    收藏  举报