Question

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

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

我希望我的svg光标顺利关注。我怎么能这样做？

<CreditVerificationRQ xmlns="http://webservices.sabre.com/sabreXML/2011/10" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" Version="2.1.0">
   <Credit>
      <CC_Info>
         <PaymentCard AirlineCode="BG" Code="CA" ExpireDate="2018-03" Number="CardNumber" />
      </CC_Info>
      <ItinTotalFare>
         <TotalFare Amount="350" CurrencyCode="USD" />
      </ItinTotalFare>
   </Credit>
</CreditVerificationRQ>

Answer 1

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

https://stackoverflow.com/a/58807531/11455013

它对我有用，所有重要的事情是放置 clientX和clientY 而不是pageX和pageY：

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

然后在CSS中，将#cursor设置为固定位置，而不是绝对位置

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

在这里，我将翻译内容放在#cursor div的中心，但是为此当然可以有其他解决方案。

Answer 2

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

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

https://jsfiddle.net/0chzmhrd/

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

<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文件中试一试。

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

2 个答案: