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;
}

标签： javascripthtmlcss

Answer 1

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

此外，您需要更改backgroundPositionXtoleft和backgroundPositionYto top。

我不完全确定这是您要执行的行为，但按照上述步骤操作会导致图像在鼠标移动时移动（假设鼠标在图像上）。