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 }