html方向键设置图片

晋新宁 2周前 10浏览 0评论

HTML中可以通过设置方向键将图片的位置进行调整。通过下面的代码来实现：

<html>
  <head>
    <style>
      #pic {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <img src="cat.jpg" id="pic">
    <script>
      document.onkeydown = function(e) {
        var pic = document.getElementById("pic");
        if (e.keyCode == 37) {
          // 方向键左
          pic.style.left = pic.offsetLeft - 10 + "px";
        } else if (e.keyCode == 38) {
          // 方向键上
          pic.style.top = pic.offsetTop - 10 + "px";
        } else if (e.keyCode == 39) {
          // 方向键右
          pic.style.left = pic.offsetLeft + 10 + "px";
        } else if (e.keyCode == 40) {
          // 方向键下
          pic.style.top = pic.offsetTop + 10 + "px";
        }
      }
    </script>
  </body>
</html>

在这个代码中，通过设置样式将图片的位置设置为绝对定位，并将左上角设置为0。然后通过JavaScript的document.onkeydown事件监听方式，来监听键盘按键事件。当方向键左被按下时，通过pic.style.left将图片向左移动10px的距离，同理，当方向键上、右、下被按下时，将图片向上、右、下移动10px的距离。

上一篇 html方块代码

下一篇 python3 的or

网站导航

网站导航

最近发表

文章归档

html方向键设置图片