動畫函數封裝：設置任意的一個元素,移動到指定的目標位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200 ...
動畫函數封裝：設置任意的一個元素,移動到指定的目標位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200px; background-color: red; /*脫離文檔流*/ position: absolute; } </style> <script> //設置任意的一個元素,移動到指定的目標位置 function animate(element, target) { clearInterval(element.timeId); //定時器的id值存儲到對象的一個屬性中 element.timeId = setInterval(function () { //獲取元素的當前的位置,數字類型 var current = element.offsetLeft; //每次移動的距離 var step = 10; step = current < target ? step : -step; //當前移動到位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定時器 clearInterval(element.timeId); //直接到達目標 element.style.left = target + "px"; } }, 20); } </script> </head> <body> </body> </html>
