動畫函式-給不同元素記錄不同定時器
阿新 • • 發佈：2022-04-14
如果多個元素都使用這個動畫函式，每次都要var宣告定時器。我們可以給不同的元素使用不同的定時器(自己專門用自己的定時器)。
核心原理:利用Js是一門動態語言，可以很方便的給當前物件新增屬性。
示例程式碼：
<!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> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; top: 150px; display: block; width: 150px; height: 150px; background-color: purple; } </style> </head> <body> <button>點選111</button> <div></div> <span>111</span> </body> <script> // 簡單動畫函式封裝 obj目標物件 target目標位置 // 給不同的元素指定了不同的定時器 function animate(obj, target) { // 當我們不斷的點選按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器 // 解決方案就是讓我們元素只有一個定時器執行 // 先清除以前的定時器只保留當前的一個定時器執行 clearInterval(obj.timer) obj.timer = setInterval(function () { if (obj.offsetLeft >= target) { // 停止動畫 本質是停止定時器 clearInterval(obj.timer) } obj.style.left = obj.offsetLeft + 1 + 'px' }, 30) } var div = document.querySelector('div') var span = document.querySelector('span') var btn = document.querySelector('button') // 呼叫函式 animate(div, 300) btn.addEventListener('click', function () { animate(span, 200) }) </script> </html>