如何使用javascript使用箭头键移动图像？答案

【问题标题】：How can I make an image move with arrow keys with javascript?如何使用javascript使用箭头键移动图像？
【发布时间】：2021-08-23 20:05:10
【问题描述】：

我对 javascript 还很陌生，一直在尝试弄清楚如何使图像移动。我想出了这段代码，它有点工作，但图像在一点点后停止移动。我该如何解决这个问题？

<!DOCTYPE html>
<html>
    <head>
        <style>
            #img {
                position: relative;
            }
        </style>
        <title>This is filler text</title>
    </head>
    <body>
        <p>This is filler text</p>
        <img src="example.jpeg" length="100" width="100" id="img" />
        <script>
            document.onkeydown = function(event) {
                    switch (event.keyCode) {
                       case 37:
                      moveLeft();
                          break;
                       case 38:
                      moveUp();
                          break;
                       case 39:
                      moveRight();
                          break;
                       case 40:
                      moveDown();
                          break;
                    }
                };
                function moveLeft() {
                    document.getElementById("img").style.left += "5px";
                }
                function moveRight(){
                    document.getElementById("img").style.right += "5px";
                }
                function moveDown(){
                    document.getElementById("img").style.bottom += "5px";

                function moveUp(){
                    document.getElementById("img").style.top += "5px";
                }
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

使用 CSS transform 和 translate 而不是 left / top
使用 KeyboardEvent.key 代替神秘的 KeyboardEvent.keyCode

const EL_img = document.querySelector("#img");
const pos = {x:0, y:0};

document.addEventListener("keydown", (ev) => {

  const dir = (ev.key.match(/(?<=^Arrow)\w+/)||[])[0];
  if (!dir) return; // Not an arrow key.
  
  ev.preventDefault(); // Prevent Browser scroll if overflow

  ({
    Left:  () => pos.x -= 5,
    Right: () => pos.x += 5,
    Up:    () => pos.y -= 5,
    Down:  () => pos.y += 5,
  }[dir])(); 
  
  EL_img.style.transform = `translate(${pos.x}px, ${pos.y}px)`
});

#img {
  height: 40px;
  transition: transform 0.2s;
}

&lt;img id=img height=40 src="https://lh3.googleusercontent.com/a-/AOh14Gh-CwvGkngFp6REJf46ncZD2p-nesp_4DmKOpSXGA=k-s420"   /&gt;

这是另一个similar answer

【讨论】：

【解决方案2】：

您需要更改的几件事：

Inline styles 通常会返回 string 值，所以在第一次按键后，+= "5px" 将 concatenate 你的字符串。
元素的position 使用top / left / right / bottom 作为与那些受尊重边缘的偏移量。因此，对于这个演示，您可能只想调整 left 和 right，negative left 值将其推向左侧，positive 将其推向左侧向右。 top 类似。

由于这两个，为这些偏移量设置一些单独的 Number 变量可能会更容易，直接对这些变量进行操作，然后更新您的内联样式。

这是一个例子：

let left_offset = 0;
let top_offset = 0;
document.onkeydown = function (event) {
  let img = document.getElementById("img");
  switch (event.keyCode) {
    case 37:
      // Move left
      left_offset -= 5;
      break;
    case 38:
      // Move up
      top_offset -= 5;
      break;
    case 39:
      // Move right
      left_offset += 5;
      break;
    case 40:
      // Move down
      top_offset += 5;
      break;
  }
  img.style.left = `${left_offset}px`;
  img.style.top = `${top_offset}px`;
};

#img {
  position: relative;
}

<p>This is filler text</p>
<img src="https://via.placeholder.com/100" length="100" width="100" id="img" />

【讨论】：