封裝緩動（變速）動畫函數 增加任意多個屬性&增加回調函數 回掉函數fn，在所有元素到達目的位置後，判斷是否傳入一個函數，有就調用 if(fn){fn()}; 這樣一次點擊，產生多個動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
封裝緩動（變速）動畫函數---增加任意多個屬性&增加回調函數
回掉函數fn，在所有元素到達目的位置後，判斷是否傳入一個函數，有就調用 if(fn){fn()};
這樣一次點擊，產生多個動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移動到400px" id="btn1" /> <div id="dv"> </div> <script src="common.js"></script> <script> //點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值 //獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //element---元素 //json---對象---多個屬性及多個目標值 //fn---函數 function animate(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { var current = parseInt(getStyle(element, attr)); var target = json[attr]; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current + "px"; if (current != target) { flag = false; } } if (flag) { clearInterval(element.timeId); if (fn) { fn(); } } //測試代碼 console.log("目標：" + target + "，當前：" + current + "，每次移動的步數" + step); }, 20) } my$("btn1").onclick = function () { var json1 = { "width": 400, "height": 200, "left": 500, "top": 80 }; animate(my$("dv"), json1, function () { var json2 = { "width": 200, "height": 100, "left": 200, "top": 120 }; animate(my$("dv"), json2, function () { var json3 = { "width": 400, "height": 300, "left": 300, "top": 80 }; animate(my$("dv"), json3); }); }); }; </script> </body> </html>
