Javascript 如何使div跟随光标，但被Xpx移向窗口的中心？

Div应该跟随光标，但是根据鼠标光标所在的四分之一，将X轴和Y轴向屏幕中心移动20px

像这样：

我用三角学来寻找从光标到窗口中心的向量，所以我有光标坐标，中心坐标和第三点C，但div在奇怪的圆圈中移动，我不知道我犯了什么错误

var lt = document.getElementById('lt')
var ltPosition = lt.getBoundingClientRect();
var element = document.getElementById('element');
var mousePosX = 0; 
var mousePosY = 0; 

document.onmousemove = function(e){
    function angle(xCursor, yCursor, xCenter, yCenter){
        var distanceA = xCursor - xCenter;
        var distanceB = yCursor - yCenter;
        var distanceC = Math.sqrt(distanceA*distanceA + distanceB*distanceB);

        var theta = Math.atan2(distanceA, distanceB);
        theta *= 180 / Math.PI;

        var offsetX = distanceC * Math.sin(theta);
        var offsetY = distanceC * Math.cos(theta);

        function follow(x,y){
            element.style.left =  x + "px";
            element.style.top = y +"px";
        }
        follow(e.clientX + offsetX, e.clientY + offsetY);   
    }
    angle(e.clientX, e.clientY, ltPosition.right, ltPosition.bottom);
}

这是小提琴：

---

我在这里还应该做什么才能拥有这个功能

那是什么

theta*=180/Math.PI在那里做什么
sin
和
cos
以弧度为单位获取角度，就像
atan
返回角度一样。如果要显示它，当然可以将其转换为度，但在
Math
API中不需要转换

我想你可能会喜欢这个。我也把它放在这里了


功能鼠标移动器（元素、offX、offY）{
var e=元素，
bc=e.getBoundingClientRect（）；
var ox=offX，
oy=offY；
如果（ox==未定义和&oy==未定义）{
ox=-数学圆（bc.width/2）；
oy=数学圆（bc高度/2）；
}
e、 parentNode.onmousemove=函数（eventObj）{
var ev=eventObj，
b=this.getBoundingClientRect（）；
var x=数学圆（ev.clientX-b.left）；
var y=数学圆（ev.clientY-b.top）；
e、 style.left=x+（ox）+“px”；
e、 style.top=y+（oy）+‘px’；
}
}
mouseMover（document.getElementById（'element'），20,20）
html，正文{
保证金：0；
身高：100%；
}
.集装箱{
宽度：100%；
身高：100%；
}
#lt，rt，ld，rd{
浮动：左；
宽度：50%；
身高：50%；
显示：内联块；
}
#元素{
背景色：红色；
宽度：50px；
高度：50px；
位置：绝对位置；
}
#上尉#路{
背景颜色：绿色；
}
#rt，#ld{
背景颜色：黄色；
}

如果不深入阅读代码，您可能已经混合了sin和cos，sin通常在Y中偏移，cos在X中偏移。@VladimirM true，但他也混合了
atan2
的参数，因此在结果中没有关系。您可能会喜欢画布。我想我现在只需要规范化向量长度？是的，没错。另外，向量当前指向外部，而不是中心，因此也可以对其求反。也许不使用固定的偏移量，但当你靠近中心时，它会变成
0
，这样图标就不会跳。例如，看起来很漂亮。你能给我一个向量归一化的公式吗？@11223342124你只需要使用一个常量
distanceC
，你就完成了。但是也有一些不需要三角函数的函数。
Math.round
有什么用？移位发生了什么？
EventObject.clientX
和
EventObject.clientY
在某些浏览器中返回十进制数。此外，正在移动的
元素可能是奇数大小。轮班？如果你指的是滚动条问题，那是因为OP想要使用百分比，这是可以的，但只在固定大小的元素中。我的例子不包括这一点。很抱歉，他可以自己修复。是的，但是CSS也允许其属性使用十进制数，所以这应该不是问题。关于偏移量，OP要求“将X轴和Y轴向屏幕中心移动20px”。My mouseMover函数在
元素
参数后接受2个参数，如果需要，也可以是负数。没有args，它只是将
元素居中。请注意，
offX
和
offY
基于
元素的左上角。