1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 div { 9 width: 100%; 10 height: 600px; 11 background: blue; 12 position: relative; 13 } 14 15 * { 16 margin: 0px; 17 padding: 0px; 18 list-style: none; 19 } 20 21 ul { 22 width: 800px; 23 height: 120px; 24 border: 2px solid blue; 25 } 26 27 ul li { 28 width: 100px; 29 height: 100px; 30 background: green; 31 margin: 10px; 32 float: left; 33 position: relative; 34 top: 120px; 35 } 36 </style> 37 38 <script src="js/tool.js"></script> 39 </head> 40 41 <body> 42 43 <ul> 44 <li>AA</li> 45 <li>BB</li> 46 <li>CC</li> 47 <li>DD</li> 48 <li>EE</li> 49 </ul> 50 51 <script> 52 var lis = document.getElementsByTagName("li"); 53 54 var m1; 55 56 function M(i) { 57 m1 = new Move(); 58 m1.ele = lis[i]; 59 m1.start = lis[i].offsetTop; 60 m1.target = 0; 61 m1.direction = "top"; 62 m1.animation(); 63 } 64 65 for(var i = 0; i < lis.length; i++) { 66 setTimeout(M, i * 500, i); 67 } 68 </script> 69 </body> 70 71 </html> 72 73 74 /* 75 var m = new Move(); 76 //让谁动？ 77 m.ele = box; 78 m.start = XX; //开始位置 79 m.target =XXX; 结束值 80 m.direction = "top"; //左右动无需给参数，上下给top 81 m.animation(); 启动动画。 82 * */ 83 function Move() { 84 this.ele = null; 85 this.start = 0; 86 this.target = 100; 87 this.speed = 10; 88 this.direction = "left"; 89 this.offset = "offsetLeft"; 90 this.animation = function() { 91 var o = this; 92 if(o.direction == "top") { 93 o.offset = "offsetTop" 94 } 95 96 var step, 97 i = o.start, 98 timer, 99 current; 100 101 function t() { 102 current = o.ele[o.offset]; 103 step = (o.target - current) / o.speed 104 step = Math.ceil(step); 105 i += step; 106 if(Math.abs(i - o.target) < 5) { 107 i = o.target; 108 clearInterval(timer) 109 } 110 o.ele.style[o.direction] = i + "px"; 111 } 112 timer = setInterval(t, 20); 113 } 114 115 }