封裝緩動動畫函數 增加多個任意多個屬性 在原來緩動動畫函數，增加任意一個屬性的基礎上，做瞭如下改變 1. 原來function animate(element, attr, target)，三個變數，改為用json對象來裝一對：屬性:目標位置的值，變為function animate(element ...
封裝緩動動畫函數---增加多個任意多個屬性
在原來緩動動畫函數，增加任意一個屬性的基礎上，做瞭如下改變
1. 原來function animate(element, attr, target)，三個變數，改為用json對象來裝一對：屬性:目標位置的值，變為function animate(element, json)
2. 之前的變速動畫函數，都任意一個屬性，改變其當前屬性的位置，到達目標屬性。現在有多個任意屬性，用json對象裝，所以要遍歷json對象裡面每一個值 for(var key in json){}, key就是這裡的attr, 所以遍歷的for(var attr in json)
3. 當前屬性對應的目標值，var target就是json裡面值的目標，var target=json[attr];
4. 添加了flag的判斷，是為了，保證在json中所有的值都到達目的位置後，再清除定時器
<!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.currentSytle[attr] || 0; } function animate(element, json) { 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); } //測試代碼 console.log("目標：" + target + ",當前" + current + ",每次移動的步數" + step); }, 20) } my$("btn1").onclick = function () { animate(my$("dv"), { "width": 400, "height": 200, "left": 500, "top": 80 }) }; </script> </body> </html>
效果如下：
