Question

嗨，我正在尝试创建“鼠标跟随”效果，但是我要挣扎的是，当我用鼠标滚动时，整个圆圈随着页面移动而不是由于某种原因而停留在鼠标上。有任何线索吗？

Station::Station(int num_staz, int num_bin) : 
    num_bin(num_bin),
    num_staz(num_staz),
    binari(num_bin)
{

}

 
 
 jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  jQuery(document).mousemove(function(e){
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30; 
  });
    
  setInterval(function(){
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    jQuery(".circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});

body, html {
	position: relative;
	height: 100%; 
	width : 100%;  
	margin: 0;
  background-color: #000000;
}


.circle {
  position: absolute;
  border: solid 1px #ccc;
	width: 60px; 
	height: 60px; 
  border-radius: 50%; 
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

Answer 1

您可以尝试使用固定位置，并使用clientX / Y代替pageX / Y

jQuery(document).ready(function() {

 var mouseX = 0, mouseY = 0;
 var xp = 0, yp = 0;

 jQuery(document).mousemove(function(e){
   mouseX = e.clientX - 30;
   mouseY = e.clientY - 30;
 });

 setInterval(function(){
   xp += ((mouseX - xp)/3);
   yp += ((mouseY - yp)/3);
   jQuery(".circle").css({left: xp +'px', top: yp +'px'});
 }, 20);

});

body, html {
	position: relative;
	height: 100%;
	width : 100%;
	margin: 0;
  background-color: #000000;
}


.circle {
  position: fixed;
  border: solid 1px #ccc;
	width: 60px;
	height: 60px;
  border-radius: 50%;
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="circle" class="circle"></span>

<div id="site"></div>

滚动页面时，“圈鼠标跟随”移动

1 个答案: