javascript - 如何找到 native 光标的中心并将自定义光标与其对齐？

Question

我使用两个 div 元素创建了一个自定义光标，它们都是圆圈。第一个是主光标，另一个是它的随从。他们使用 jQuery 来跟踪鼠标坐标。我的问题是，当光标不移动时，我想让它们看起来像同心圆(两个圆有相同的中心)但它们不在中心。我已经尝试使用 (e.PageX -(offset - radius of circle)) 但它没有返回任何值。我无法正确解释这一点，抱歉，这里是新的，我已经链接了下面的代码笔:

$(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