时间戳

首页 > 解决方案 > 如何找到本机光标的中心并将自定义光标与其对齐？

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

问题描述

我使用两个 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')
});
});

密码笔

标签： javascriptjqueryhtmlcss

解决方案

问题是你得到了光标点的leftandtop来设置两个圆的位置，一个比另一个小，所以它们是从那个确切的位置绘制的

如果要将圆居中到光标的指针，请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>

这里有一支工作笔

如果您想要不同的居中，请添加您想要的结果的 img

推荐阅读