méthode js pour réaliser le déplacement du texte en fonction des compétences de la souris en matière de mouvement_javascript

L'exemple de cet article décrit comment js implémente le mouvement du texte après le mouvement de la souris. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il s'agit d'un code de fonctionnalité de souris très simple. Lorsque vous déplacez la souris sur une page Web, une chaîne de texte suivra le mouvement de la souris

Copier le code Le code est le suivant :

<script><br> varx,y<br> var step=18 //C'est l'intervalle entre deux mots adjacents <br> var drapeau = 0<br> var message="Script House www.jb51.net vous souhaite la bienvenue !" //Mettez le texte qui doit être affiché ici<br> message=message.split("") //Diviser la chaîne en un tableau<br> var xpos=new Array() //Créer un tableau pour enregistrer la coordonnée x de chaque position<br> for (i=0;i<=message.length-1;i) { //Attribuer une valeur initiale à chaque élément<br /> xpos[i]=-50<br /> ><br /> var ypos=new Array() //Créer un tableau pour enregistrer la coordonnée y de chaque position<br /> pour (i=0;i<=message.length-1;i) {<br /> ypos[i]=-200<br /> ><br /> function movehandler(e){ //Gérer les événements de déplacement de la souris<br /> x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX //Selon les différents navigateurs, enregistrez la position horizontale de la souris <br /> y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY //Enregistre la position verticale de la souris<br /> flag=1 //La position de la souris a changé et doit être recalculée <br /> ><br /> fonction makesnake() {<br /> if (flag==1 && document.all) { //Si c'est IE<br /> for (i=message.length-1; i>=1; i--) { //File d'attente de coordonnées de processus<br> xpos[i]=xpos[i-1] step //Déplacez chaque donnée de coordonnées vers l'avant d'un espace et ajoutez un espacement des caractères <br> ypos[i]=ypos[i-1]<br> ><br> xpos[0]=x step //Écrire de nouvelles données à la fin de la file d'attente des données de coordonnées<br> ypos[0]=y<br> pour (i=0; i<message.length-1; i ) {<br /> var thisspan = eval("span" (i) ".style")// Générer l'objet d'opération actuel spanx.style<br /> thisspan.posLeft=xpos[i]<br /> thisspan.posTop=ypos[i]<br /> ><br /> ><br /> else if (flag==1 && document.layers) { //Si c'est NS<br /> for (i=message.length-1; i>=1; i--) { //File d'attente de coordonnées de processus<br> xpos[i]=xpos[i-1] step //Déplacez chaque donnée de coordonnées vers l'avant d'un espace et ajoutez un espacement des caractères <br> ypos[i]=ypos[i-1]<br> ><br> xpos[0]=x étape //Écrire de nouvelles données à la fin de la file d'attente des données de coordonnées<br> ypos[0]=y<br> for (i=0; i<message.length-1; i ) { //Modifiez les coordonnées du calque où se trouve chaque mot en fonction des données du tableau <br /> var thisspan = eval("document.span" i) //Générer l'objet d'opération actuel document.spanx<br /> thisspan.left=xpos[i]<br /> thisspan.top=ypos[i]<br /> ><br /> ><br /> var timer=setTimeout("makesnake()",30) //Après 30 millisecondes, ajustez à nouveau la position de chaque caractère en fonction de la situation<br /> ><br /> </script>


<script><br> <!-- Début de JavaScript -<br /> // Générez un span comme conteneur pour chaque mot ici <br /> pour (i=0;i<=message.length-1;i) {<br /> document.write("<span id='span" i "' class='spanstyle'>")<br> document.write(message[i])<br> document.write("</span>")<br> ><br> //Spécifiez le processus de traitement des événements de mouvement de la souris<br> si (document.layers){<br> document.captureEvents(Event.MOUSEMOVE);<br> ><br> document.onmousemove = movehandler;<br> // - Fin de JavaScript - ---><br> </script>


Cet effet n'est-il pas cool ?

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