JavaScript, jQuery : 마우스와 엘리먼트 사이 거리 계산 : 방법, 예제, 구현

JavaScript, jQuery : 마우스와 엘리먼트 사이 거리 계산 : 방법, 예제, 구현

 

이 튜토리얼에서는 jQuery를 사용하여 페이지의 특정 엘리먼트에서 마우스의 거리를 얻는 방법을 배웁니다. 이 코드는 사용자 상호 작용이 많고 사용자 마우스가 요소와 특정 거리에 있을 때 이벤트를 실행하려는 소규모 웹 앱에서 유용 할 수 있습니다.

거리를 픽셀 단위로 표시하는 레이블과 중앙 위치를 차지할 엘리먼트가 있다고 가정합니다.

 

 

jQuery 코드

먼저 전역 변수와 이 이벤트에 대한 준비 이벤트를 만듭니다.

 

(function() {

    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    $(document).mousemove(function(e) {
        distance = calculateDistance($element, e.pageX, e.pageY);
        $distance.text(distance);
    });

})();

 

코드에서 알 수 있듯이 방문자가 마우스를 움직일 때마다 실행되도록 마우스 이동 이벤트에 기능을 설정했습니다. 우리가하는 일은 e 변수를 사용하여 마우스의 X 및 Y 위치를 가져 와서 element 매개 변수와 함께 calculateDistance 함수로 보냅니다.

 

 

거리 계산

아래는 마우스 위치와 현재 요소 위치 사이의 거리를 계산하는 데 사용하는 기능입니다.

 

function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }