Comment puis-je placer une div par rapport au pointeur de la souris à l'aide de jQuery?
Supposons que j'ai un lien dans ma page et je veux que quand je passe ma souris sur le lien, une div montrera si l'on se réfère à la souris en x,y.
Comment puis-je le faire à l'aide de jQuery?
Vous devez vous connecter pour publier un commentaire.
la fonction ci-dessus fera l'DIV apparaissent sur le lien où que ce soit sur la page. Il va se fanent lentement lorsque le lien est planait. Vous pouvez également utiliser .hover() à la place. À partir de là, la DIV restera, alors, si vous voulez la DIV à disparaître lorsque la souris passe au loin, puis,
Si vous DIV est déjà positionné, vous pouvez simplement utiliser
Aussi, gardez à l'esprit, votre DIV style doit être mis à
display:none;
pour fadeIn ou un spectacle.mouseenter
etmouseleave
.Il existe de nombreux exemples de l'utilisation de JQuery pour récupérer les coordonnées de la souris, mais aucun corrigé mon problème.
Le Corps de ma page web est de 1000 pixels de large, et je centre au milieu de l'utilisateur de la fenêtre du navigateur.
Maintenant, dans mon code JavaScript, lorsque l'utilisateur a cliqué avec le bouton droit sur ma page, je voulais un div à apparaître à la position de la souris.
Problème est, juste à l'aide de e.pageX valeur n'était pas tout à fait droit. Il avait un bon travail, si j'ai redimensionné mon navigateur à environ 1000 pixels de large. Ensuite, le menu div serait apparaissent à la bonne position.
Mais si l'augmentation de la taille de ma fenêtre du navigateur, par exemple, à 1200 pixels de large, puis la div apparaît sur 100 pixels vers la droite de l'endroit où l'utilisateur a cliqué.
La solution est de combiner e.pageX avec le rectangle de délimitation de l'élément body. Lorsque l'utilisateur change la taille de la fenêtre de son navigateur, la "gauche" la valeur de l'élément de corps de changements, et nous avons besoin de prendre cela en compte:
Ouf. Qui m'a pris un moment pour le fixer ! J'espère que ce sera utile à d'autres développeurs !
top: 50%; margin-top: 500px;
, également utilisertempY = e.pageY - bodyOffsets.bottom;
. Mais cela ne fonctionnera pas si il n'y a pas de haut ou de margin-top propriétés sur le corps.Vous n'avez pas besoin de créer un
$(document).mousemove( function(e) {})
à manipuler la souris en x,y. Obtenez de l'événement dans la$.hover
fonction et à partir de là, il est possible d'obtenir des positions x et y de la souris. Voir le code ci-dessous: