为什么图像不跟随 mousemove

Question

试了很多次都找不到问题出在哪里我跟着讲师他的代码是运行ning 而我的代码是相同的但不是运行

var move = document.getElementById('move')

document.addEventListener('mousemove', function(e) {
    move.style.left = e.clientX
    move.style.top = e.clientY

})

<img id="move" src="img.jpg" alt="PIC" />

Answer 1

1) 图片应为 absolute 或 fixed

2) e.clientX 和 e.clientY 将为您提供没有任何单位的数据。所以你必须添加任何单位。我在这里添加了px

var move = document.getElementById('move')

document.addEventListener('mousemove', function(e) {
  move.style.left = e.clientX + "px";
  move.style.top = e.clientY + "px";

})

img {
  position: fixed;
}

<img id="move" src="https://picsum.photos/200/300" alt="PIC" />

Answer 2

您忘记为图片添加样式... 无论如何，您还需要指定您使用的单位类型 (px)

var move = document.getElementById('move')

document.addEventListener('mousemove', function(e) {
    move.style.left = e.clientX + "px";
    move.style.top = e.clientY + "px";

})

#move
{
  position: absolute;
}

<img id="move" src="img.jpg" alt="PIC" />

Answer 3

你的代码一切正常。只需将图像的位置设置为 fixed/absolute 并且必须使用任何类型的单位(px,pt,em)

为什么图像不跟随 mousemove

why the image doesn't follow mousemove

javascript

addeventlistener