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