js-Methode zum Realisieren von Textbewegungen entsprechend den Fähigkeiten der Mausbewegung_javascript

Das Beispiel in diesem Artikel beschreibt, wie js Textbewegungen nach Mausbewegungen implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist ein sehr einfacher Mausfunktionscode. Wenn Sie die Maus auf einer Webseite bewegen, folgt eine Textzeichenfolge der Mausbewegung

Code kopieren Der Code lautet wie folgt:

<script><br> var x,y<br> var step=18 //Dies ist das Intervall zwischen zwei benachbarten Wörtern <br> var flag=0<br> var message="Script House www.jb51.net heißt Sie willkommen!" //Geben Sie hier den Text ein, der angezeigt werden soll<br> message=message.split("") //String in ein Array aufteilen<br> var xpos=new Array() //Erstelle ein Array, um die x-Koordinate jeder Position aufzuzeichnen<br> for (i=0;i<=message.length-1;i) { //Weisen Sie jedem Element einen Anfangswert zu<br /> xpos[i]=-50<br /> }<br /> var ypos=new Array() //Erstelle ein Array, um die Y-Koordinate jeder Position aufzuzeichnen<br /> für (i=0;i<=message.length-1;i) {<br /> ypos[i]=-200<br /> }<br /> function movehandler(e){ //Mausbewegungsereignisse verarbeiten<br /> x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX // Je nach Browser die horizontale Position der Maus aufzeichnen <br /> y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY //Zeichne die vertikale Position der Maus auf<br /> flag=1 //Die Mausposition hat sich geändert und muss neu berechnet werden <br /> }<br /> Funktion makesnake() {<br /> if (flag==1 && document.all) { //Wenn es IE<br /> ist for (i=message.length-1; i>=1; i--) { //Prozesskoordinatenwarteschlange<br> xpos[i]=xpos[i-1] Schritt //Bewege alle Koordinatendaten um eine Stelle nach vorne und füge Zeichenabstand hinzu <br> ypos[i]=ypos[i-1]<br> }<br> xpos[0]=x step //Neue Daten in das Ende der Koordinatendatenwarteschlange schreiben<br> ypos[0]=y<br> für (i=0; i<message.length-1; i ) {<br /> var thisspan = eval("span" (i) ".style")// Generieren Sie das aktuelle Operationsobjekt spanx.style<br /> thisspan.posLeft=xpos[i]<br /> thisspan.posTop=ypos[i]<br /> }<br /> }<br /> else if (flag==1 && document.layers) { //Wenn es NS<br /> ist for (i=message.length-1; i>=1; i--) { //Prozesskoordinatenwarteschlange<br> xpos[i]=xpos[i-1] Schritt //Bewege alle Koordinatendaten um eine Stelle nach vorne und füge Zeichenabstand hinzu <br> ypos[i]=ypos[i-1]<br> }<br> xpos[0]=x step //Neue Daten in das Ende der Koordinatendatenwarteschlange schreiben<br> ypos[0]=y<br> for (i=0; i<message.length-1; i ) { //Ändern Sie die Koordinaten der Ebene, in der sich jedes Wort befindet, entsprechend den Daten im Array <br /> var thisspan = eval("document.span" i) //Generieren Sie das aktuelle Operationsobjekt document.spanx<br /> thisspan.left=xpos[i]<br /> thisspan.top=ypos[i]<br /> }<br /> }<br /> var timer=setTimeout("makesnake()",30) //Passen Sie nach 30 Millisekunden die Position jedes Zeichens erneut an die Situation an<br /> }<br /> </script>


<script><br> <!-- Beginn von JavaScript -<br /> //Generieren Sie hier für jedes Wort einen Span als Container <br /> für (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> //Geben Sie den Verarbeitungsprozess von Mausbewegungsereignissen an<br> if (document.layers){<br> document.captureEvents(Event.MOUSEMOVE);<br> }<br> document.onmousemove = movehandler;<br> // - Ende von JavaScript - --><br> </script>


Ist dieser Effekt nicht cool?

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.