Comment implémenter l'effet de couche jQuery en suivant le mouvement de la souris_jquery

L'exemple de cet article décrit comment jQuery implémente les effets de calque qui suivent le mouvement de la souris. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Objectifs de base

Écrivez un calque qui suit le mouvement de la souris,

La position actuelle de la souris est affichée dans le calque,

Comme indiqué ci-dessous :

La raison pour laquelle cette couche utilise jQuery au lieu de javascript est que le code jQuery est facilement compatible avec tous les navigateurs grand public actuels. Au moins, IE8 n'a pas besoin de grandes sections de code comme javascript pour la compatibilité.

2. Processus de production

Le cœur de cette expérience est l'événement mousemove dans jquery,

Déclenché lorsque la souris bouge.

Le code est le suivant :

Copier le code Le code est le suivant :

souris

<script> /*Une paire de e.pageX et e.pageY peut obtenir les coordonnées actuelles de la souris. Notez que le paramètre formel e est utilisé dans la déclaration initiale de la fonction*/ <br>. $(document).mousemove(function (e) { <br> varx; <br> var y <br> var xy="<br>coordonnée x : " e.pageX ", coordonnée y : " e.pageY <br> x=e.pageX; <br> y=e.pageY <br> Document .getElementById("mousePosition").style.left = x "px" <br> Document .getElementById("mousePosition").style.top = y "px" <br> $("#mousePosition").html(xy); <br> }) <br> <br> </script>


J'espère que cet article sera utile à la programmation jQuery de chacun.