Comment obtenir les coordonnées de la position de la souris avec jQuery-connaissance HTML-php.cn

Maison

programmation quotidienne

connaissance HTML

Comment obtenir les coordonnées de la position de la souris avec jQuery

藏色散人

Dec 21, 2018 pm 02:57 PM

jq obtient les coordonnées de position actuelle de la souris en temps réel, ce qui peut être obtenu grâce aux deux méthodes d'attribut de jQuery event.pageX et event .pageY. jQuery event.pageX peut être utilisé pour trouver la position de la souris par rapport au bord gauche du document, et event.pageY peut être utilisé pour trouver la position de la souris par rapport au bord supérieur du document.

Comment obtenir les coordonnées de la position de la souris avec jQuery

Ci-dessous, nous vous présenterons la méthode jq pour obtenir les coordonnées de position de la souris basée sur des exemples de code spécifiques.

L'exemple de code est le suivant :

<!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>

Copier après la connexion

mousemove()La méthode signifie que lorsque le pointeur de la souris se déplace dans l'élément spécifié, l'événement mousemove se produira ou l'événement mousemove se produira. Fonction à exécuter sur l'événement. (Dans le code ci-dessus, l'événement paramètre de la fonction est équivalent à un objet, utilisé pour fournir des informations sur la position de la souris.) La propriété

event.pageX renvoie la position du pointeur de la souris, par rapport au côté gauche du bord du document. La propriété event.pageY renvoie la position du pointeur de la souris, par rapport au bord supérieur du document. La méthode

text() définit ou renvoie le contenu textuel de l'élément sélectionné. (La balise forte ici est utilisée pour afficher la valeur des coordonnées de la souris en sortie) L'effet de

est le suivant :

Comment obtenir les coordonnées de la position de la souris avec jQuery

Remarque :

1. Les attributs event.pageX et event.pageY sont généralement utilisés ensemble.

2. Lorsque l'utilisateur déplace la souris d'un pixel, un événement mousemove se produit. La gestion de tous les événements mousemove consomme des ressources système. Veuillez utiliser cet événement avec prudence.

Cet article concerne la méthode de jq pour obtenir les coordonnées de la position actuelle de la souris en temps réel. C'est très simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn