jQuery를 사용하여 마우스 위치 좌표를 얻는 방법-HTML 지식-php.cn

집

일일 프로그램

HTML 지식

jQuery를 사용하여 마우스 위치 좌표를 얻는 방법

藏色散人

Dec 21, 2018 pm 02:57 PM

jq는 마우스의 현재 위치 좌표를 실시간으로 얻습니다. 이는 jQuery event.pageX 및 event.pageY의 두 가지 속성 메소드를 통해 얻을 수 있습니다. jQuery event.pageX는 문서의 왼쪽 가장자리를 기준으로 마우스 위치를 찾는 데 사용할 수 있으며, event.pageY는 문서의 위쪽 가장자리를 기준으로 마우스 위치를 찾는 데 사용할 수 있습니다.

jQuery를 사용하여 마우스 위치 좌표를 얻는 방법

이제 특정 코드 예제를 기반으로 jq 마우스 위치 좌표를 얻는 방법을 소개하겠습니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jq获取鼠标位置坐标示例</title>
    <style type="text/css">
 *{
            margin: 0;
 }
        html, body{
            height:100%;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(function() {
            $("body").mousemove(function(event){
                var relPageCoords = "(" + event.pageX + "," + event.pageY + ")";
 $(".mouse-cords").text(relPageCoords);
 });
 });
 </script>
</head>
<body>
<p>当前鼠标的坐标为： <strong class="mouse-cords"></strong></p>
</body>
</html>

로그인 후 복사

mousemove()메서드는 지정된 요소 내에서 마우스 포인터가 움직일 때 mousemove 이벤트가 발생하거나 mousemove 이벤트가 발생할 때 실행할 함수를 지정하는 것을 나타냅니다. (위 코드에서 함수 매개변수인 이벤트는 마우스 위치 정보를 제공하는 객체와 동일합니다.)

event.pageX 속성은 문서의 왼쪽 가장자리를 기준으로 마우스 포인터의 위치를 반환합니다. event.pageY 속성은 문서의 위쪽 가장자리를 기준으로 마우스 포인터의 위치를 반환합니다.

text() 메서드는 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. (여기서 Strong 태그는 출력 마우스 좌표 값을 표시하는 데 사용됩니다.)

효과는 다음과 같습니다.

jQuery를 사용하여 마우스 위치 좌표를 얻는 방법