时间戳

首页 > 解决方案 > 滚动页面时，圆形鼠标跟随正在移动

javascript - 滚动页面时，圆形鼠标跟随正在移动

问题描述

嘿，伙计们，我正在尝试创建鼠标跟随效果，但我正在努力的是，当我用鼠标滚动时，整个圆圈会随着页面移动，而不是出于某种原因停留在鼠标上。有什么线索吗？

 
 
 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;
}
<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>

标签： javascriptjqueryhtmlcss

解决方案

您可以尝试使用固定位置，并使用 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>

推荐阅读