찾다
일일 프로그램HTML 지식jQuery를 사용하여 마우스 위치 좌표를 얻는 방법



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를 사용하여 마우스 위치 좌표를 얻는 방법

참고:

1. event.pageX 및 event.pageY 속성은 일반적으로 함께 사용됩니다.

2. 사용자가 마우스를 한 픽셀 이동하면 mousemove 이벤트가 발생합니다. 모든 mousemove 이벤트를 처리하려면 시스템 리소스가 소모됩니다. 이 이벤트를 주의 깊게 사용하시기 바랍니다.

이 글은 마우스의 현재 위치 좌표를 실시간으로 얻는 jq의 방법에 관한 것입니다. 매우 간단하고 이해하기 쉽습니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!



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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.