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 }