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/700/700");
}
#foo {
  position: fixed;
  bottom: 0;
  left: calc((100% - 200px) / 2);
}

<img src="http://placekitten.com/200/200" id="foo" />

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

1 个答案: