嘿,大家好,我正在尝试创建鼠标跟随效果,但我遇到的问题是,当我用鼠标滚动时,整个圆圈会随着页面移动,而不是由于某种原因与鼠标一起移动。有什么线索吗?
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>
最佳答案
您可以尝试使用固定位置,并使用 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>
关于javascript - 页面滚动时,圆形鼠标跟随正在移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59936817/