溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript運動函數怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript運動函數怎么用”文章能幫助大家解決問題。
運動函數是我們自己封裝的一個函數。
作用是將css樣式的改變不是一次性完成 是 逐步完成 執行效果 看上去 像是 動畫/運動 完成的css樣式改變。
實際項目中框架等都有自己的運動函數我們目前封裝一個簡單的兼容多屬性的運動函數。
運動函數部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: rgb(231, 12, 48);
margin: 0 auto;
opacity: 0.3;
/* transition: 3s; */
}
p {
width: 100px;
height: 100px;
background: black;
position: fixed;
top: 200px;
left: 50px;
}
</style>
</head>
<body>
<button>點擊</button>
<div></div>
<script>
var oDiv = document.querySelector('div');
var oBtn = document.querySelector('button');
var oP = document.querySelector('p')
oBtn.addEventListener('click',function(){
move(oDiv,{width:1800,height:900,opacity:1} , function(){ oDiv.style.background = 'black' } );
})
// 運動函數命名
// move 運動函數
// @param object element 要執行運動函數的標簽對象
// @param object object 要執行運動的css屬性 和 最終數值
// @param function callback 運動結束執行的回調函數
// 默認值是空函數
function move(element, object, callback = function () { }) {
// 定義變量存儲定時器個數
let num = 0;
// 循環遍歷參數二(object)
// 使用 for...in 循環 使用 let 定義變量
for (let type in object){
// type 是 參數2對象的屬性 也就是 要運動的css樣式的屬性
// object[type] 是 參數2對象的屬性值 也就是 要運動的css樣式的 最終數值
// 定時器數量加一
num++;
// 開始數值，也就是獲取的原始數值，兼容透明度寫法
let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
// 結束數值，也就是輸入的屬性對應的屬性值，兼容透明度寫法
let endVal = (type === 'opacity') ? object[type] * 100 : object[type];
// 定時器開始，time記錄定時器編號
let time = setInterval( function () {
// 設定步長值= 結束數值 - 開始數值 / 10
let step = (endVal - startVal) / 10;
// 如果步長值大于0 就向上取整，反之則向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 將初始值 += 步長值 再把新值賦值給初始值
startVal += step;
// 將新的步長值 賦值給 標簽對象的css樣式 兼容 透明度
element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';
// 如果初始值等于最終值
if (startVal === endVal) {
// 清除定時器
clearInterval(time);
// 變量 累減1 也就是 少了一個執行的定時器
// num--;
// 當執行的定時器為0 時，所有定時器都清除了
if (num === 0) {
callback();
}
}
}, 20)
}
}
</script>
</body>
</html>運行結果：
關于“JavaScript運動函數怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
