影像跳到最后位置平移運動

我有一些按鈕可以移動帶有翻譯的影像，但是當我按下一個按鈕，然后按下另一個按鈕，然后再按下第一個按鈕時，它會跳轉到我最后一次按下第一個按鈕的位置。

這是負責移動影像的js。

function transform(side, n) {
    let translatePixels = 0;

    if (side == 'right') {
        return function(e) {
            translatePixels  = n;
            player.style.transform = `translate(${translatePixels}px)`;
        }
    }
    if (side == 'left') {
        return function(e) {
            translatePixels -= n;
            player.style.transform = `translate(${translatePixels}px)`;
        }
    }  
                       if (side == 'top') {
        return function(e) {
            translatePixels -= n;
            player.style.transform = `translateY(${translatePixels}px)`;
        }
    }     
if (side == 'bottom') {
        return function(e) {
            translatePixels  = n;
            player.style.transform = `translateY(${translatePixels}px)`;
        }
    }     
}

const translateRight = transform('right', 8);
const translateLeft = transform('left', 8);
const translateTop = transform('top', 8);
const translateBottom = transform('bottom', 8);

uj5u.com熱心網友回復：

基本上在 JSON 變數中創建兩個物件。我們可以解決這個問題x。y

另外，我使用switch陳述句來減少代碼。

player.style.transform = `translate(${x}px, ${y}px)`;

在translate()css 中有兩個引數，第一個用于 x，第二個用于 y。
所以我們只在最后添加一次樣式！

將變數移出translatePixels函式。
通過這樣做-=， =我們將作業。

發生此錯誤是因為每次單擊一個按鈕時，該變數都會重置為 0。

如果你把變數放在外面，用戶第一次打開網站時它會是 0，其他時候它會正常作業（保存值）

let player = document.querySelector("#player");

let translatePixels = {
    x: 0,
    y: 0
};

let { x, y } = translatePixels;

function transform(side, n) {
    switch (side) {
        case "right":
            x  = n;
            break;
        case "left":
            x -= n;
            break;
        case "bottom":
            y  = n;
            break;
        case "top":
            y -= n;
            break;
    }

    player.style.transform = `translate(${x}px, ${y}px)`;
}

<div id="player">I am the player!</div>

    <div id="container">
        <button onclick="transform('top', 8)">top</button>
        <button onclick="transform('bottom', 8)">bottom</button>
        <button onclick="transform('left', 8)">left</button>
        <button onclick="transform('right', 8)">right</button>
    </div>

uj5u.com熱心網友回復：

您正在重新宣告初始值translatePixels = 0;，您需要在函式之外宣告

要解決有關 X 和 Y 的問題，請更改transform為position

我也改變了一些你的代碼，盡量不要重復一些代碼

const player = document.getElementById('player');
const topBtn = document.getElementById('TopBtn');
const rightBtn = document.getElementById('RightBtn');
const bottomBtn = document.getElementById('BottomBtn');
const leftBtn = document.getElementById('LeftBtn');
let translatePixels = 0;

const transform = (side, n) => {
  if (side === 'right' || side === 'left') {
    return function() {
      side === 'right' ? translatePixels  = n : translatePixels -= n;
      player.style.left = `${translatePixels}px`;
    }
  }
  if (side === 'top' || side === 'bottom') {
    return function() {
      side === 'top' ? translatePixels -= n : translatePixels  = n;
      player.style.top = `${translatePixels}px`;
    }
  }
}

const translateRight = transform('right', 8);
const translateLeft = transform('left', 8);
const translateTop = transform('top', 8);
const translateBottom = transform('bottom', 8);

topBtn.addEventListener('click', translateTop)
rightBtn.addEventListener('click', translateRight)
bottomBtn.addEventListener('click', translateBottom)
leftBtn.addEventListener('click', translateLeft)

#player {
  width: 100px;
  height: 100px;
  background: red;
  position: relative
}

<div id="player">Player ??</div>
<br><br><br>
<button id="TopBtn">top</button>
<button id="BottomBtn">bottom</button>
<button id="LeftBtn">left</button>
<button id="RightBtn">right</button>

標籤：javascript html css

上一篇：反應不渲染匯入的組件

下一篇：從javascript為<option>賦予屬性