如何提高 mousemove/clientX/Y 的速度并应用变换？

Question

我已经构建了一个 WordPress 主题。我遇到了一个网站，该网站创建了一个 div 来跟随用户的光标。当用户将鼠标悬停在按钮或 link 上时，div 会平滑放大。

我想将这个不错的功能添加为可选功能。

我在网页中添加了 div，#ambition_cursor 并添加了一些基本样式。 div 现在显示为蓝色圆圈。圆圈的位置固定在网站的左上角。可以通过添加 CSS translate 属性.

来更改位置

我设法使用以下代码使其工作：

var ambition_cursor =  document.getElementById("ambition_cursor");

function ambition_mouse(e) {

    var ambition_cursor_x = e.clientX;     // Get the horizontal coordinate
    var ambition_cursor_y = e.clientY;     // Get the vertical coordinate 

    var ambition_cursor_pos = `translate(${ambition_cursor_x}px, ${ambition_cursor_y}px)`;
    ambition_cursor.style.transform = ambition_cursor_pos;
}

window.addEventListener('mousemove', ambition_mouse);

这里最大的缺点是滞后 (?)。有相当大的延迟，尤其是在快速移动鼠标时。你可以试试on this site. I also put the situation in a JSFiddle；尽管那里并没有真正发生延迟。

我还没有应用太多样式（默认光标是可见的，因此您可以更好地了解实际位置）。在我花很多时间之前，我首先希望它能更好地工作。

如何提高速度，使div位置更准确地跟随鼠标？我是初学者，所以我真的不知道我应该进行哪些 JavaScript 优化。

当前代码是 JavaScript，但 jQuery 也是一个选项。

非常感谢！

更新：example how it looks on my computer.

Answer 1

我访问了站点示例，破解了开发控制台，发现 throttled(20, ambition_mouse) 它不是性能问题，解决方案是不限制事件。它太流畅了，不可能是性能问题，这给了我第一个线索，它必须是 accidental/deliberate 效果。

Answer 2

页面上的所有元素都应用了过渡。 Remove/override 这种风格和延迟消失了（已测试）。

Answer 3

作为 Joseph Atkinson 出色回答的替代：

var ambition_cursor =  document.getElementById("ambition_cursor");

    function ambition_mouse(e) {
    
        ambition_cursor.style.left = e.clientX + 'px';     // Get the horizontal coordinate
        ambition_cursor.style.top = e.clientY + 'px' ;     // Get the vertical coordinate 
    }
    
    window.addEventListener('mousemove', ambition_mouse);

参见：https://levelup.gitconnected.com/use-javascript-to-make-an-element-follow-the-cursor-3872307778b4

如何提高 mousemove/clientX/Y 的速度并应用变换？

How to increase speed of mousemove/clientX/Y and applying a transform?

javascript

jquery

mouseevent

addeventlistener

mousemove