Question

我正在开发一个网站，我希望有两个圆圈作为光标。我已经找到了解决方法（two circles should follow the cursor – one small and one big (with delay)），但是问题是当我将鼠标一直向右或向下移动这两个圆圈时，会导致垂直或水平滚动条。

此代码是上面链接中的复制粘贴，因此您可以尝试将鼠标移至屏幕底部，以查看我在说什么。

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });

});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>

<a>link</a>

我想防止两个滚动条出现，所以当您将鼠标一直向右或向下移动时，什么都没有发生（https://astoryabouttrusts.co.uk/?1545565994017）。有人知道该怎么做吗？

祝你有美好的一天！

编辑：Ishtiaq建议的解决方案实际上防止了滚动条，但也意味着外圆不能位于窗口外部（始终完全可见）。 Mark Schultheiss实际上回答了我的问题。他的解决方案可以防止滚动条，同时也不能完全看到外部圆圈（就像在摩根大通网站上的链接一样）。感谢Roko C. Buljan。实际上，我在CSS中使用了body {cursor: none;}，在jQuery中使用了“相同”的东西。

Answer 1

将主体溢出设置为隐藏的body{overflow:hidden;}

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
let xy = {
    left: e.pageX,
    top: e.pageY
  };
  $('#circle-big').add('#circle').css(xy);
});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}

#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}

a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}

a:hover {
  font-size: 30px;
}
body{overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>
<a>link</a>

Answer 2

要解决此问题，您需要做的是从left: e.pageX中减去一些值和top: e.pageY 尝试使用修改后的代码，我认为这可以解决您的问题；

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});

$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX-35,
    top: e.pageY-35
  });
  $('#circle').css({
    left: e.pageX-35,
    top: e.pageY-35
  });

});

两个圆圈作为光标，导致垂直和水平滚动条

2 个答案: