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

问题描述

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

我想将此出色的功能添加为可选功能。

我在网页#ambition_cursor中添加了一个div，并添加了一些基本样式。 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进行尝试。我也将这种情况放在a JSFiddle中；尽管延迟实际上并没有真正发生。

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

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

当前代码是JavaScript，但也可以使用jQuery。

非常感谢！

更新：example how it looks on my computer.

解决方法

页面上的所有元素均已应用过渡。删除/覆盖此样式，延迟消失（经过测试）。

替代约瑟夫·阿特金森的出色答案：

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

我访问了站点示例，打开了开发控制台，并发现 受限制（20，ambition_mouse） 这不是性能问题，解决方案是不要限制事件。太平滑了，无法解决性能问题，这给了我第一个线索，那就是必须是偶然/故意的影响。

javascript jquery mouseevent mousemove