使用 div (jQuery) 跟随鼠标位置 - 滚动时出现问题

Question

我创建了一个自定义 svg #cursor，它跟随我的鼠标位置 jQuery（使用 css 替换光标将图像大小限制为 32px，并且在 Retina 上看起来像素化，所以我想要坚持使用 jQuery).

问题：当用户滚动时，光标不会移动，从而产生抖动效果：https://jsfiddle.net/jhhbrook/ucuLefut/

我希望我的 svg 光标顺畅地跟随。我该怎么做？

$(document).mousemove(function(e){
$("#cursor").css({left:e.pageX, top:e.pageY});

Answer 1

为什么不更好地使用 CSS 光标属性本身？据我所知，没有任何鼠标事件就不可能获得光标位置

 body {
 cursor:url(http://mayadufeu.github.io/img/cursor-auto.svg), auto;
 }

https://jsfiddle.net/0chzmhrd/

UPDATE：我认为您可以使用下面的代码获取鼠标坐标，但不知道如何在滚动事件逐步更新位置而不是连续更新时很好地设置光标动画值。

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {cursor:none;}
#content {height: 1200px;}
#cursor {position: absolute;}
#counter {position:fixed;margin:1px 0px 0px 100px;}
</style>
</head>
<body>

<p id="counter">counter</p>
<img id="cursor" src="http://mayadufeu.github.io/img/cursor-auto.svg"/>
<div id="content">
  content
</div>

</body>  
<script type="text/javascript">
var a;var b;
$(document).ready(function(){
  $(document).mousemove(function(e){
      a = e.pageX;
      b = e.pageY;
  });

  $(document).mousemove(function(e){
    $("#cursor").css({left:e.pageX, top:e.pageY});
    $('#counter').text('Mouse -> X : '+a+ '  ' + 'Y: '+b);
  });

  $(document).scroll(function (e) { 
    $('#counter').text('Mouse -> X : '+a+ '  ' + 'Y: '+b);
    //can animate here
  });

});
</script>
</html>

不幸的是，JSfiddle idk 上没有运行为什么要在 HTML 文件中尝试它。

Answer 2

我遇到了完全相同的问题，在另一个线程中有解决方案：

它对我有用，重要的是用 clientX 和 clientY 代替 pageX 和 pageY:

$("#cursor").css({left:e.clientX, top:e.clientY});

AND 在 css 中，将 #cursor 设置为 position fixed 而不是 absolute

#cursor {position: fixed; width: 20px; height: 20px; transform: translate(-10px, -10px); }

这里我把鼠标放在#cursor 的中心div 的翻译，当然也可以有其他的解决方案。

使用 div (jQuery) 跟随鼠标位置 - 滚动时出现问题

Follow mouse position with div (jQuery) - issue when scrolling

jquery

scroll

cursor

mousemove