如何使 div 跟隨光標，但向窗口中心移動 Xpx？

Question

Div 應該跟隨光標，但根據鼠標光標所在的四分之一，向屏幕中心移動 X 軸和 Y 軸 20px？

像這樣： https : //i.imgur.com/XaDk1hI.png

我使用三角函數來找到從光標到窗口中心的向量，所以我有光標坐標、中心坐標和第三個點 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);
}

這是小提琴： https : //jsfiddle.net/sgvpvqhc/

為了擁有此功能，我還應該在這里做什么？

Answer 1

什么是theta *= 180 / Math.PI; 在那里做什么？ sin和cos以弧度表示角度，就像atan返回它一樣。 如果您想顯示它，當然可以將其轉換為度數，但在Math API 中不需要轉換。

（更新小提琴演示）

Answer 2

我雖然你可能喜歡這個。 我也放在這里了。 https://jsfiddle.net/sgvpvqhc/5/

 function mouseMover(element, offX, offY) { var e = element, bc = e.getBoundingClientRect(); var ox = offX, oy = offY; if (ox === undefined && oy === undefined) { ox = -Math.round(bc.width / 2); oy = -Math.round(bc.height / 2); } e.parentNode.onmousemove = function(eventObj) { var ev = eventObj, b = this.getBoundingClientRect(); var x = Math.round(ev.clientX - b.left); var y = Math.round(ev.clientY - b.top); e.style.left = x + (ox) + 'px'; e.style.top = y + (oy) + 'px'; } } mouseMover(document.getElementById('element'), 20, 20)

 html, body { margin: 0; height: 100%; } .container { width: 100%; height: 100%; } #lt, #rt, #ld, #rd { float: left; width: 50%; height: 50%; display: inline-block; } #element { background-color: red; width: 50px; height: 50px; position: absolute; } #lt, #rd { background-color: green; } #rt, #ld { background-color: yellow; }

 <div id='container' class='container'> <div id='element'></div> <div id='lt'></div> <div id='rt'></div> <div id='ld'></div> <div id='rd'></div> </div> <div class='box'></div>