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 }
