如何在 JavaScript 中跟踪鼠标在 X 轴上的位置？

Question

我想知道如何在屏幕上跟踪鼠标在 X 轴上的位置。基于 Java/Processing 的有限知识，它类似于 Java 中的 mouseX。另外，我想根据鼠标在 X 轴上的位置旋转图像元素。收到一些建议会很好。

Answer 1

跟踪鼠标在 X 轴上的位置是通过一个eventListener（mousemove事件）完成的

此侦听器使用回调函数，该函数应更改transform元素的（旋转）css 属性。

    // DOM accessor to your HTML element

    const rotatingE = document.getElementById('my-rotating-el')

    // Event Listener

    document.addEventListener('mousemove', e => {

      // Callback function

      const mX = e.clientX / window.innerWidth * 360

      rotatingE.style.transform = 'rotate('+ mX +'deg)'

    })  

我在这里做了一个简单的例子