双图像背景在鼠标悬停时移动答案

【问题标题】：Double image background moves on mouseover双图像背景在鼠标悬停时移动
【发布时间】：2021-05-06 07:54:30
【问题描述】：

所以我想要实现的是构建一个 HTML 页面，它的背景从鼠标移动到相反的方向。问题是，我想创建一个双层图像，一个背景和一个前景。前景图像较小，而背景图像是全角的。到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trymoving</title>

    <style type="text/css">
        body
        {
            margin:0;
            padding:0;
        }

        section
        {
            height:100vh;
            background:url(background-image.png);
            overflow:hidden;
        }

        .sec2 {
            width: 100%;
            position: relative;
            top: 0;
            left: 0;
            background:url('foreground-image.png');
        }
        
    </style>
</head>

<body>
    <section class="first">
        <div class="sec2"></div>
    </section>

    <script>
        const section = document.getElementsByTagName('section')[0];

        section.addEventListener('mousemove', (e) =>{
            const moveX = (e.pageX * -1 / 40);
            const moveY = (e.pageY * -1 / 40);

            section.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
        });
    
        const section2 = document.getElementsByClassName('sec2')[0];

        section2.addEventListener('mousemove', (e) =>{
            const moveX = (e.pageX * -1 / 10);
            const moveY = (e.pageY * -1 / 10);

            section2.style.backgroundPosition = moveX + 'px ' + moveY + 'px';
        });
    </script>
</body>

</html>

我目前的问题是前景图像左对齐。我希望它在中间。另外，我想让它在多种屏幕尺寸上都具有响应性。

【问题讨论】：

能否请您在codesandbox.io 中提供您的代码？它使测试和尝试其他人变得更容易......
您好，感谢您的建议。这是链接：codesandbox.io/s/xenodochial-hawking-dr94t?file=/index.html 我想要实现的是bg 比fg 移动得慢，所以它创建的像3d 效果，用户可以看到不同的层。此外，鼠标悬停应该接管整个屏幕的效果，而不仅仅是光标移到屏幕上时。

标签： javascript html css web frontend

【解决方案1】：

这需要对 css、html 和 javascript 进行一些调整。

使内部图像居中：我用display: flex 将内部图像居中，您也尝试过...您将其应用于子元素，但需要在父元素上设置

移动前景图像： 我用img 元素替换了内部section 元素。背景仍然可以通过编辑backgroundPosition 移动，但前景图像需要通过JavaScript 编辑top 和left 来移动。为此，您需要在前景图像上设置 position: relative。

调整事件监听器：你只需要监听父section元素上的mousemove事件。见以下代码：

<head>
    ...
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }

      #background {
        height: 100vh;
        background: url(https://wallpapercave.com/wp/12oNQS9.jpg);
        overflow: hidden;
        background-repeat: no-repeat;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      #foreground {
        position: relative;
      }
    </style>
  </head>

  <body>
    <section id="background">
      <img id="foreground" src="data:image/jpg;base64,/9j/..."></div>
    </section>

    <script>
      const backgroundEl = document.getElementById("background");
      const foregroundEl = document.getElementById("foreground");

      backgroundEl.addEventListener("mousemove", (e) => {
        const moveBackgroundX = (e.pageX * -1) / 40;
        const moveBackgroundY = (e.pageY * -1) / 40;

        const moveForegroundX = (e.pageX * -1) / 10;
        const moveForegroundY = (e.pageY * -1) / 10;

        backgroundEl.style.backgroundPosition = moveBackgroundX + "px " + moveBackgroundY + "px";
        foregroundEl.style.left = moveForegroundX + "px ";
        foregroundEl.style.top = moveForegroundY + "px ";
      });
    </script>
  </body>

我也是updated your codesandbox

【讨论】：

先生，这正是我想要的。你刚刚解决了我整个星期的问题。非常感谢先生的帮助。万分感激。也谢谢你的解释。学到了很多。
您好，先生。我需要你的另一个帮助。所以我试图添加另一个图层，但这次是文本，它会随着光标的方向移动。我研究并复制了前景的样式，似乎行不通。我看到由于 flex，它将元素分成不同的部分。我不确定如何替换 flex 以使前景和文本都堆叠起来。我希望文本居中并位于前景之上。我在下面包含了我的代码框链接； codesandbox.io/s/broken-wildflower-0xzr3?file=/… 抱歉打扰您了。
问题是你的#text是position: absolute，然后top和left是相对于父容器的，也就是<section>。 <section> 的大小会覆盖整个页面，这就是为什么在移动鼠标时文本会出现在左上角的原因。在 JavaScript 中使用 paddingLeft 和 paddingTop 移动文本可能会起作用...但似乎您可能需要更多地了解 css 的概念，以帮助您更好地理解它以供将来使用。尝试搜索“css 盒子模型”或“css 定位”或“css 显示”之类的内容
我明白了。好的，谢谢先生的解释。我会调查的。

【解决方案2】：

我不确定这是否正是您所追求的，但这会使背景图像居中并将图像向相反方向移动

const moveX = ((e.pageX) - (window.innerWidth / 2)) / 30;
const moveY = ((e.pageY)  - (window.innerHeight / 2)) / 30;
section.style.backgroundPosition = (50 - moveX + "% ") + (50 - moveY + "%");

【讨论】：