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/
이 기능을 사용하려면 여기서 또 무엇을해야합니까?
무엇이다 theta *= 180 / Math.PI;이 일을? sin와 cos마찬가지로, 라디안 각도를 가지고 atan돌아 그것. 그것을 표시하고 싶다면 반드시 각도로 변환하십시오. 그러나 MathAPI 내부에서는 변환이 필요하지 않습니다.
( 업데이트 된 바이올린 데모 )
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다