波浪运动

  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 }