如何解决如何提高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) 这不是性能问题,解决方案是不要限制事件。太平滑了,无法解决性能问题,这给了我第一个线索,那就是必须是偶然/故意的影响。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。