Question

我使用两个div元素创建了一个自定义光标，它们都是圆形。第一个是主光标，另一个是它的跟随者。他们使用jQuery跟踪鼠标坐标。我的问题是，当光标不移动时，我想使它们看起来都像同心圆（两个圆都具有相同的中心），但是它们不在中心。我已经尝试过使用（e.PageX-（offset-圆的半径）），但是它没有返回任何值。我无法在此处对此进行适当的解释，抱歉，我已链接了以下代码库：

$(document).mousemove(function(e){
 $('#cursor').css({
   "left" : (e.pageX + 'px'),
   "top" : (e.pageY   + 'px')
    });
$('#cursorFollow').css({
   "left" : (e.pageX + 'px'),
   "top" : (e.pageY   + 'px')
});
});

Codepen

Answer 1

问题是，您正在获取光标的left和top来设置两个圆的位置，并且一个圆要小于另一个圆，以便从该精确位置绘制它们。

如果您想将圆心定位到光标的指针，请在两个元素中使用transform: translate(-50%, -50%);，它将在两个方向（中心）上将圆移动一半大小。

$(document).mousemove(function(e){
     $('#cursor').css({
       "left" : (e.pageX + 'px'),
       "top" : (e.pageY   + 'px')
   });
    $('#cursorFollow').css({
       "left" : (e.pageX + 'px'),
       "top" : (e.pageY   + 'px')
    });
    });

*{
/*   cursor:none; */
}
body{
  height: 300vh;
}
.cursor{
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #000;
    transform: translate(-50%, -50%);     //new
}
.cursor-follower{
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    opacity: 0.4;
    border-radius: 50%;
    background-color: #000;
    transition: 0.2s ease-out;
    pointer-events: none;
    will-change: all;
    transform: translate(-50%, -50%);       //new
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor" id="cursor"></div>
        <div class="cursor-follower" id="cursorFollow"></div>

Here a working pen

如果您希望以不同的方式居中，请添加一张您期望的结果的img

如何找到本机光标的中心并将自定义光标对准它？

1 个答案: