javascript - 如何使用javascript使图像在悬停时移动？

Question

所以我有一个背景图片，但没有带标签的 html，但我想使用某种类型的 javascript 让背景图片移动。但是当我将 img 标签添加到 html 中时，它会覆盖其他所有内容。这里有直播example我不太了解 javascript，所以我被困住了。

body { background-image: url('images/bg_2880.jpg'); }

我需要 javascript 像这样在鼠标悬停时移动图像 js fiddle

Answer 1

这称为视差效果

简单的例子:

addEventListener('mousemove', ev => {
  const force = 100;
  const dx = -ev.clientX / window.innerWidth * force;
  const dy = -ev.clientY / window.innerHeight * force;
  document.body.style.backgroundPositionX = dx + 'px';
  document.body.style.backgroundPositionY = dy + 'px';
});

body {
  background-image: url("http://placekitten.com/800/800");
}