匀速动画函数封装 · js技术点

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>封装动画函数</title> <style type="text/css"> input:hover { cursor: pointer; } div { margin-top: 30px; width: 200px; height: 200px; background-color: green; position: absolute; } </style> </head> <body> <input type="button" value="移动400px" id="btn1"> <input type="button" value="移动到800px" id="btn2"/> <div id="dv"></div> <script type="text/javascript"> document.getElementById("btn1").onclick = function() { animate(document.getElementById("dv"), 400); } document.getElementById("btn2").onclick = function() { animate(document.getElementById("dv"), 800); } /* * 移动任意一个元素到指定位置 * element: 要移动的元素 * target: 要移动的距离（px) */ function animate(element, target){ clearInterval(element.tiemId); element.timeId = setInterval(function() { var current = element.offsetLeft; var step = 10; // 每次移动10px step = current < target ? step : -step; current += step; if(Math.abs(target-current) > Math.abs(step)){ element.style.left = current + "px"; }else { clearInterval(element.timeId); element.style.left = target + "px"; } }, 20); } </script> </body> </html> ```