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向右移动，但随后中间层停止移动alltogheter，由于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>

如何在此处使用javascript选择单个元素？

1 个答案: