如何使用jQuery通过方向键移动IMG元素？技术问题咨询

我来帮你搞定这个方向键移动图片的需求，咱们从你提到的两个核心问题入手，再补全完整的实现代码：

1. 在document上绑定键盘事件的正确方式 #

要监听全局键盘事件，你需要在DOM加载完成后，给document绑定keydown事件（方向键这类按键用keydown比keypress更可靠）。用jQuery的写法如下：

$(function() {
  // DOM加载完成后绑定事件
  $(document).on('keydown', moveIMG);
});

这样只要用户按下方向键，moveIMG函数就会被触发，并且自动接收event参数。

2. switch语句中调用函数必须加括号 #

你代码里的doLeft、doTop只是函数的引用，不会执行函数逻辑，必须加上括号doLeft()、doTop()才会调用对应的移动函数。这是JavaScript函数调用的基础语法哦。

完整实现代码 #

下面是补全后的完整代码，包含图片样式、事件绑定和移动逻辑：

<html>
<head>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <style>
    /* 必须给图片设置定位，top/left属性才会生效 */
    #move-img {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 50px;
      height: 50px;
    }
  </style>
  <script>
    $(function() {
      // 绑定键盘事件
      $(document).on('keydown', moveIMG);
    });

    function moveIMG(event) {
      var x = event.keyCode;
      switch(x) {
        case 37: // 左箭头
          doLeft();
          break;
        case 38: // 上箭头
          doTop();
          break;
        case 39: // 右箭头
          doRight();
          break;
        case 40: // 下箭头
          doBottom();
          break;
      }
    }

    // 向上移动：减少top值
    function doTop() {
      var $img = $('#move-img');
      var currentTop = parseInt($img.css('top'));
      $img.css('top', (currentTop - 10) + 'px');
    }

    // 向下移动：增加top值
    function doBottom() {
      var $img = $('#move-img');
      var currentTop = parseInt($img.css('top'));
      $img.css('top', (currentTop + 10) + 'px');
    }

    // 向左移动：减少left值
    function doLeft() {
      var $img = $('#move-img');
      var currentLeft = parseInt($img.css('left'));
      $img.css('left', (currentLeft - 10) + 'px');
    }

    // 向右移动：增加left值
    function doRight() {
      var $img = $('#move-img');
      var currentLeft = parseInt($img.css('left'));
      $img.css('left', (currentLeft + 10) + 'px');
    }
  </script>
</head>
<body>
  <img id="move-img" src="你的图片路径" alt="可移动图片">
</body>
</html>

关键细节说明 #

• 定位设置：给图片添加position: absolute是核心，否则top和left属性无法改变元素的位置。
• 步长控制：代码里用10px作为每次移动的距离，你可以根据需求调整这个数值。
• parseInt转换：$img.css('top')返回的是带px的字符串，必须用parseInt转成数字才能进行加减运算。

内容的提问来源于stack exchange，提问作者damirqasha