> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 상대 마우스 위치를 얻습니다

jQuery는 상대 마우스 위치를 얻습니다

William Shakespeare
풀어 주다: 2025-03-05 00:31:08
원래의
329명이 탐색했습니다.
jquery 에 대한 마우스의 상대 위치를 얻으십시오.

다음 jQuery 코드 스 니펫은 마우스 포인터의 상대 위치를 얻는 데 사용됩니다. 이 함수는 요소 ID와 마우스 포인터의 현재 x 및 y 좌표를 매개 변수로 사용합니다. 그런 다음 마우스 커서의 현재 위치와 지정된 요소 사이의 상대 거리를 반환합니다. jQuery Get Relative Mouse Position

예제 사용

마우스 위치에 대한 jQuery에 대한 FAQS (FAQS) 마우스 이벤트를 사용하지 않고 마우스 위치를 얻기 위해 jQuery를 사용하는 방법은 무엇입니까?
function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}
로그인 후 복사
jQuery에서 마우스 이벤트는 일반적으로 마우스 위치를 얻는 데 사용됩니다. 그러나 마우스 이벤트를 사용하지 않고 마우스 위치를 얻으려면

메소드를 사용할 수 있습니다. 이 메소드는 문서에 대한 일치 요소 세트에서 첫 번째 요소의 오프셋 좌표를 반환합니다. 간단한 예는 다음과 같습니다.

jQuery(document).ready(function($) {

    // 获取鼠标指针当前的x和y坐标
    var X = $('body').offset().left;
    var Y = $('body').offset().top;
    mouseX = ev.pageX - X;
    mouseY = ev.pageY - Y;

    // 获取页面上相对于#eid元素的相对位置
    alert(rPosition('eid',mouseX,mouseY)); //注意此处将x,y更正为mouseX,mouseY

});
로그인 후 복사
요소 내부에서 마우스 위치를 얻기 위해 jQuery를 사용하는 방법은 무엇입니까?

요소 내부에서 마우스 위치를 얻으려면 이벤트 객체의 및

속성과 함께

메소드를 사용할 수 있습니다. 예는 다음과 같습니다.

jQuery에서

방법의 사용은 무엇입니까? .offset() jQuery의

메소드는 이벤트 핸들러 함수를 이벤트에 첨부하거나 요소에서 이벤트를 트리거하는 데 사용됩니다. 이 이벤트는 마우스 포인터가 요소 내부로 움직일 때 요소로 전송됩니다. 마우스의 움직임을 추적하고 마우스의 위치에 따라 작업을 수행하는 데 사용될 수 있습니다.
var position = $("#element").offset(); // 返回包含top和left属性的对象
console.log("元素位于:" + position.left + "," + position.top);
로그인 후 복사
마우스 포인터의 위치를 ​​얻기 위해 jQuery를 사용하는 방법은 무엇입니까?

당신은 jQuery를 사용하여 및

특성을 사용하여 마우스 포인터의 위치를 ​​얻을 수 있습니다. 이러한 특성은 문서의 왼쪽 및 상단에 각각 마우스 포인터 위치를 제공합니다.

요소와 관련하여 마우스 위치를 찾기 위해 jQuery를 사용하는 방법은 무엇입니까? .offset() 요소와 관련하여 마우스 위치를 찾으려면 마우스 포인터 위치에서 요소의 위치를 ​​빼낼 수 있습니다. 예는 다음과 같습니다. pageX 이것은 지정된 요소에 대한 마우스 포인터 위치를 제공합니다. pageY 는 코드 예제를 미묘하게 조정하여 및

변수가 정의되지 않은 문제를 해결하고 대신 사용하는 문제를 해결했습니다. 또한, 텍스트는 더 매끄럽고 자연스럽게 만들기 위해 연마됩니다.
$("#element").mousemove(function(event) {
  var parentOffset = $(this).offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  console.log("X坐标:" + relX + " Y坐标:" + relY);
});
로그인 후 복사

위 내용은 jQuery는 상대 마우스 위치를 얻습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿