javascript - 如何在这里用 javascript 选择单个元素？

Question

请参见此处:https://siteweb.synergieetvitalite.com/monportfolio/

我希望当用户移动鼠标时智能手机和笔记本电脑能够靠近在一起。我正在使用的代码:

HTML:

<div class="scene">
      <div data-speed="51" class="layer layer-middle"></div>
      <div data-speed="81" class="layer layer-top"></div>
</div>

JS:

<script> document.addEventListener('mousemove', parallax);

    function parallax(e) {
      e.preventDefault();
      this.querySelectorAll('.layer-middle').forEach((layer) => {
        let speed = layer.getAttribute('data-speed');
        layer.style.transform = `translateX(${e.clientX * speed / 1000}px)`;
      })
    } 

</script>

我尝试对此进行修改，以便 .layer-top 向右移动，但随后中间层完全停止移动，可能是因为 SelectorAll 或 forEach 的原因。我不太了解 javascript，所以我无法简单地使该函数单独为每个元素工作。

感谢您的帮助!

Answer 1

我认为您可以删除 foreach 并分别选择每个元素，如下所示。这样，您就可以将笔记本电脑移至右侧，将手机移至左侧，反之亦然。我稍微改变了你的代码。尝试一下，让我知道这是否是您正在寻找的东西。

<script> document.addEventListener('mousemove', parallax);

    function parallax(e) {
      e.preventDefault();
      laptop = document.querySelector('.layer-middle');
      let speed = laptop.getAttribute('data-speed');
      laptop.style.transform = `translateX(${e.clientX * speed / 1000}px)`;
      phone = document.querySelector('.layer-top');
      phone.style.transform = `translateX(${-1*e.clientX * speed / 1000}px)`;
    } 

</script>