封裝緩動（變速）動畫函數 增加任意多個屬性&回調函數&層級&透明度 相較之前的，增加了2個判斷，第一個判斷是不是透明度，第二個判斷是不是zindex, 都不是，就只是普通屬性和之前一樣 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
封裝緩動（變速）動畫函數---增加任意多個屬性&回調函數&層級&透明度
相較之前的，增加了2個判斷，第一個判斷是不是透明度，第二個判斷是不是zindex, 都不是，就只是普通屬性和之前一樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } input { z-index: 10; 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; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定時器 //定時器,返回的是定時器的id element.timeId = setInterval(function () { var flag = true;//預設,假設,全部到達目標 //遍歷json對象中的每個屬性還有屬性對應的目標值 for (var attr in json) { //判斷這個屬性attr中是不是opacity if (attr == "opacity") { //獲取元素的當前的透明度,當前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目標的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移動後的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判斷這個屬性attr中是不是zIndex //層級改變就是直接改變這個屬性的值 element.style[attr] = json[attr]; } else { //普通的屬性 //獲取元素這個屬性的當前的值 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); } //zIndex:1000 //透明度: 數字類型----小數---放大100倍 my$("btn1").onclick = function () { var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; animate(my$("dv"), json1, function () { animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000}); }); }; </script> </body> </html>
