缓动

  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             #box {
 16                 position: absolute;
 17                 left: 0px;
 18                 top: 800px;
 19             }
 20         </style>
 21         <script src="js/tool.js"></script>
 22     </head>
 23 
 24     <body>
 25 
 26         <div>
 27             <img id="box" src="img/f21.png" />
 28         </div>
 29 
 30         <script>
 31             //关于位置距离的缓动
 32             /*动画几个重要参数
 33              1、动画的起始值 start = -1000
 34              2、动画的结束值 target = 0
 35              3、动画的的节奏，步长。匀速运动，加速，减速，变速。
 36              4、元素当前值。 current = -300
 37              5、剩余值  rest =  target - current 
 38              6、步长 step = rest/10
 39                              81/10
 40                  0 - 100 米
 41                  10米。9米，8.1米
 42                  
 43               
 44              * 
 45              * */
 46             var box = document.getElementById("box");
 47             var start = box.offsetLeft;
 48             var target = 0;
 49 
 50             var m1 = new Move();
 51             //让谁动？
 52         /*    m1.ele = box;
 53             m1.start = box.offsetLeft;
 54             m1.target = -500;
 55             m1.direction = "left";
 56             m1.animation();*/
 57 
 58             var m2 = new Move();
 59             //让谁动？
 60             m2.ele = box;
 61             m2.start = box.offsetTop;
 62             m2.target = 0;
 63             m2.direction = "top";
 64             m2.animation(); 
 65         </script>
 66     </body>
 67 
 68 </html>
 69 /*
 70  var m = new Move();
 71 //让谁动？
 72 m.ele = box;
 73 m.start = XX; //开始位置
 74 m.target =XXX; 结束值
 75 m.direction = "top"; //左右动无需给参数，上下给top
 76 m.animation();  启动动画。
 77  * */
 78 function Move() {
 79     this.ele = null;
 80     this.start = 0;
 81     this.target = 100;
 82     this.speed = 10;
 83     this.direction = "left";
 84     this.offset = "offsetLeft";
 85     this.animation = function() {
 86         var o = this;
 87         if(o.direction == "top") {
 88             o.offset = "offsetTop"
 89         }
 90 
 91         var step,
 92             i = o.start,
 93             timer,
 94             current;
 95 
 96         function t() {
 97             current = o.ele[o.offset];
 98             step = (o.target - current) / o.speed
 99             step = Math.ceil(step);
100             i += step;
101             if(Math.abs(i - o.target) < 5) {
102                 i = o.target;
103                 clearInterval(timer)
104             }
105             o.ele.style[o.direction] = i + "px";
106         }
107         timer = setInterval(t, 20);
108     }
109 
110 }