如何用JavaScript通过方向键移动图片？求完整实现方法

开发者阿泽

2026-7-9

修复方向键移动图片的JavaScript代码

先明确你现有代码里的几个核心问题：

选择器错误：document.querySelector('images') 要改成 document.querySelector('img')，而且你定义的变量是image，后续代码却误用了images，变量名不统一
无效事件：window.addEventListener('start', ...) 这个事件不存在，直接删掉即可
定位缺失：图片默认是静态定位（static），style.left和style.top对静态定位元素无效，必须给图片设置position: relative或absolute
初始值处理：如果图片初始没设置style.left/style.top，parseInt会得到NaN，导致移动逻辑失效，需要做默认值兜底
代码不完整：switch语句未闭合，也没实现上下方向的移动逻辑

完整可运行代码

HTML部分（同时修正了alt标签的闭合错误）

<img src="images/example.png" alt="example" style="position: relative; left: 0; top: 0;">

JavaScript部分

const image = document.querySelector('img');
const moveBy = 10;

// 获取当前位置，处理初始值为0的情况
function getCurrentPosition(axis) {
  return parseInt(image.style[axis]) || 0;
}

window.addEventListener('keydown', (e) => {
  // 阻止页面默认滚动行为，避免干扰图片移动
  e.preventDefault();
  
  switch(e.key) {
    case 'ArrowLeft':
      image.style.left = `${getCurrentPosition('left') - moveBy}px`;
      break;
    case 'ArrowRight':
      image.style.left = `${getCurrentPosition('left') + moveBy}px`;
      break;
    case 'ArrowUp':
      image.style.top = `${getCurrentPosition('top') - moveBy}px`;
      break;
    case 'ArrowDown':
      image.style.top = `${getCurrentPosition('top') + moveBy}px`;
      break;
  }
});