1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>匀速动画封装</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 #box { 15 width: 80px; 16 height: 80px; 17 background-color: red; 18 } 19 </style> 20 </head> 21 22 <body> 23 <button id="btn">点我啊</button> 24 <div id="box"></div> 25 <script> 26 window.onload = function() { 27 //起始位置 28 //1.定义变量 29 var timer = null, 30 begin = 0, 31 target = 800; 32 $("btn").onclick = function() { 33 clearInterval(timer) 34 timer = setInterval(function() { 35 //缓动公式 --- 起始值+=(结束值 - 起始值)*缓动系数 36 begin += (target - begin) * 0.2 37 38 if (Math.random(begin) >= target) { 39 clearInterval(timer) 40 } 41 $("box").style.marginLeft = begin + "px" 42 }, 100) 43 } 44 45 function $(id) { 46 return typeof id === "string" ? document.getElementById(id) : null; 47 } 48 } 49 </script> 50 </body> 51 52 </html>