javascript - 如何使 div 跟随光标，但向窗口中心移动 Xpx？

Question

Div 应该跟随光标，但根据鼠标光标所在的季度，通过 X 和 Y 轴向屏幕中心移动 20px？

像这样:/image/XDXZV.png

我用三 Angular 法求出从光标到窗口中心的向量，所以我有光标坐标、中心坐标和第三点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);
}

这是 fiddle :https://jsfiddle.net/sgvpvqhc/

为了拥有此功能，我还应该在这里做什么？

Answer 1

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

( updated fiddle demo )