案例：移動元素，封裝動畫函數 1. div要移動,要脫離文檔流 position:absolute 2. 如果樣式的代碼是在style的標簽中設置,外面是獲取不到 3. 如果樣式的代碼是在style的屬性設置,外面是可以獲取 4. 獲取div的當前位置 console.log(my$("dv").o ...
案例：移動元素，封裝動畫函數
1. div要移動,要脫離文檔流---position:absolute 2. 如果樣式的代碼是在style的標簽中設置,外面是獲取不到 3. 如果樣式的代碼是在style的屬性設置,外面是可以獲取 4. 獲取div的當前位置 console.log(my$("dv").offsetLeft);
動畫函數animate封裝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } input { margin-top: 20px; } div { margin-top: 30px; width: 200px; height: 100px; background-color: pink; position: absolute; } </style> </head> <body> <input type="button" value="移動到400px" id="btn1" /> <input type="button" value="移動到800px" id="btn2" /> <div id="dv"></div> <script src="common.js"></script> <script> //點擊第一個按鈕，移動到400px my$("btn1").onclick = function () { animate(my$("dv"), 400); }; //點擊第二個按鈕，移動到800px my$("btn2").onclick = function () { animate(my$("dv"), 800); }; //動畫函數animate封裝 function animate(element, target) { //先清理定時器 clearInterval(element.timeId); //一會要清理定時器 （只產生一個定時器） element.timeId = setInterval(function () { //獲取div當前位置 var current = element.offsetLeft; //數字類型，沒有px //div每移動多少像素---步數 var step = 10; 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>
