javascript - 在 mousemove 上更改图像的位置

Question

我想在鼠标移动时更改图像的位置，但即使在我执行 console.log

时更改了位置，图像也不会改变

var image = document.getElementById('img')

image.addEventListener('mousemove', function(e) {
  console.log(e.pageX * -1 / 12)
  var valueX = (e.pageX * -1 / 12);
  var valueY = (e.pageY * -1 / 12);
  image.style.backgroundPositionX = valueX + "px"
  image.style.backgroundPositionY = valueY + "px"
});

<header>

  <img id="img" src="https://placehold.it/100x100" alt="">

</header>

header {
    height: 100vh;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

header img {
    width: 100%;
    height: 100%;
    position: absolute;
}

Answer 1

您需要将 style="position:absolute;" 添加到您的 img。

此外，您需要将 backgroundPositionX 更改为 left 并将 backgroundPositionY 更改为 top。

我不完全确定这是您想要的行为，但按照上述步骤操作会导致图像在鼠标移动时移动(前提是鼠标在图像上)。