勻速動畫函數封裝 · 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> ```