JavaScript技巧：讓你的網頁元素動起來- move函數詳解

一、move函數是什麼

在JavaScript中，想要使網頁元素動起來，我們通常會選擇使用css動畫或者jQuery調用animate()函數等方法。但是，這些方法的功能相對來說是局限的。而move函數則是一種自己編寫的移動動畫函數，它可以實現元素的平滑移動，並且可以設定移動速度、移動方向以及移動距離等參數。

一般形式如下：

function move(obj, dir, target, speed, callback) {
    clearInterval(obj.timer);
    var current = parseInt(getStyle(obj, dir));
    if (current > target) {
        speed = -speed;
    }
    obj.timer = setInterval(function() {
        var oldValue = parseInt(getStyle(obj, dir));
        var newValue = oldValue + speed;
        if ((speed > 0 && newValue >= target) || (speed < 0 && newValue <= target)) {
            newValue = target;
        }
        obj.style[dir] = newValue + "px";
        if (newValue == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
    }, 30);
}

其中，參數含義如下：

• obj：要移動的頁面元素
• dir：表示要移動的方向，如left、right、top、bottom等
• target：表示元素的最終位置
• speed：表示移動的速度
• callback：表示移動結束後的回調函數（可選）

二、move函數的實現原理

move函數的實現原理類似於一個定時器，實現的大致過程如下：

1. 清除掉之前的定時器防止重複執行
2. 獲取元素當前的位置
3. 判斷當前位置與目標位置的距離，並確定移動的方向和速度
4. 設定一個定時器，每個一定的時間間隔改變元素的位置
5. 如果元素已經移動到目標位置，清除定時器，執行回調函數

move函數的實現原理比較簡單，但需要注意的是，由於JavaScript本身是單線程的，move函數如果執行時間過長，就會阻塞主線程的執行，因此在移動較多元素的時候，可以採用多線程或者其他方式來優化。

三、move函數的使用方法

使用move函數很簡單，只需要在JavaScript代碼中調用move函數並傳入相應的參數即可。下面是一個例子：

 #box {
 position: absolute;
 left: 100px;
 top: 100px;
 width: 100px;
 height: 100px;
 background-color: #f00;
 }
 function getStyle(obj, name) {
 if (window.getComputedStyle) {
 return getComputedStyle(obj, null)[name];
 } else {
 return obj.currentStyle[name];
 }
 }
 function move(obj, dir, target, speed, callback) {
 clearInterval(obj.timer);
 var current = parseInt(getStyle(obj, dir));
 if (current > target) {
 speed = -speed;
 }
 obj.timer = setInterval(function() {
 var oldValue = parseInt(getStyle(obj, dir));
 var newValue = oldValue + speed;
 if ((speed > 0 && newValue >= target) || (speed < 0 && newValue <= target)) {
 newValue = target;
 }
 obj.style[dir] = newValue + "px";
 if (newValue == target) {
 clearInterval(obj.timer);
 callback && callback();
 }
 }, 30);
 }
 window.onload = function() {
 var oBox = document.getElementById("box");
 oBox.onclick = function() {
 move(oBox, "left", 200, 20, function() {
 move(oBox, "top", 200, 20);
 });
 };
 };
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/309631.html