更改鼠标移动图像的位置

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 。

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

Answer 2

你差点就吃了。 该示例代码只是将内容整理得很细，然后将一些内容移到了CSS中。

关键的更改是使用<div>而不是<img> 。 当您在Javascript中使用backgroundPositionX和backgroundPositionY时，这些值用于元素的背景图像，不适用于<img> 。 好了，它们也可以在那里使用，但是src会隐藏背景，除非您使用透明图像。

 function mvImg(e) { var valueX = (e.pageX * -1 / 12); var valueY = (e.pageY * -1 / 12); this.style.backgroundPositionX = valueX + "px" this.style.backgroundPositionY = valueY + "px" } window.onload = function() { var im = document.getElementById("mv-img"); if (im) { im.addEventListener("mousemove",mvImg,false); } } 

 #mv-img { width:100px; height:100px; background-image:url("https://via.placeholder.com/100/456"); background-repeat: no-repeat; background-color: #192; } 

 <div id="mv-img"></div>