Question

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

Answer 1

P5.js（由同一人开发，但使用javascript）是类似于Processing的流行库/框架，可以为您处理

但是在普通javascript中，您将需要一个事件监听器

var mouse = {
    x: undefined, 
    y:undefined
};

window.addEventListener("mousemove", function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
});

此操作是侦听鼠标移动，然后将其记录到对象

然后将mouseX放在可以书写的位置

var mouseX = mouse.x;

或者您可以直接从

获取

mouse.x;
//still the same

Answer 2

通过eventListener（mousemove事件）跟踪X轴上的鼠标位置
此侦听器使用回调函数，该回调函数应更改元素的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)'
    })

我做了一个简单的例子here

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

2 个答案: