JavaScript implementiert coole Mouse-Tailing-Effekte
|
Nachdem Sie sich das angesehen haben, garantiere ich Ihnen, dass Sie Hände haben und alle möglichen schönen kleinen Schwänze basteln können!
Der vollständige Code lautet wie folgt. Sie können ihn leicht verstehen, indem Sie sich die Kommentare ansehen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
/*Div-Stil*/
#hauptsächlich{
Breite: automatisch; Höhe: 1500px; Rand: 0; Hintergrundfarbe: schwarz;
}
</Stil>
</Kopf>
<Text>
<div id="main"></div>
<Skript>
//==========JS-Code des Mausplanetenschwanzes============
//========Funktion: Aktuelle Mauskoordinaten abrufen=========
Funktion getMousePosition(Ereignis) {
var x = 0; //x-Koordinate var y = 0; //y-Koordinate //documentElement gibt das Dokumentelement eines Dokuments zurück.
doc = Dokument.Dokumentelement;
//body gibt das Body-Element des Dokuments zurück body = document.body;
//Kompatibilität lösen, wenn (!event) event = window.event;
//Löse die Differenz zwischen den relativen Koordinaten, nachdem das Mausrad gedreht wurde //pageYoffset ist nur in Netscape gültig if (window.pageYoffset) {
x = Fenster.SeiteXOffset;
y = Fenster.SeitenYOffset;
} sonst {//Anderes Browser-Maus-Scrollen x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc && doc.clientLeft || body && body.clientLeft || 0);
y = (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc && doc.clientTop || body && body.clientTop || 0);
}
//Das erhaltene x plus die horizontale Koordinate des Mauszeigers relativ zur Browserseite (oder dem Clientbereich), wenn das Ereignis ausgelöst wird x += event.clientX;
//Das erhaltene x plus die vertikale Koordinate y des Mauszeigers relativ zur Browserseite (oder dem Clientbereich), wenn das Ereignis ausgelöst wird += event.clientY;
//Gib x und y zurück
gibt {'x': x, 'y': y} zurück;
}
//========Funktion: Aktuelle Mauskoordinaten abrufen=========
//=====Generieren Sie eine Zufallszahl von minNum bis maxNum=====
Funktion Zufallszahl(Min.Zahl,Max.Zahl){
Schalter(Argumente.Länge){
Fall 1:
gibt parseInt zurück (Math.random()*minNum+1,10);
Fall 2:
gibt parseInt zurück (Math.random()*(maxNum-minNum+1)+minNum,10);
Standard:
gebe 0 zurück;
}
}
//=====Generieren Sie eine Zufallszahl von minNum bis maxNum======
//======Binden Sie ein Mausbewegungsereignis an das gesamte Dokument======
document.onmousemove = Funktion(Ereignis){
//Erstellen Sie ein Tag auf der Seite (hier wird ein benutzerdefiniertes Tag styleImg erstellt)
var styleImg = document.createElement("div");
//Zufallszahlen 1-5 abrufen und den Beschriftungsstil entsprechend den Zufallszahlen festlegen var r = randomNum(1,5);
Schalter (r) {
Fall 1:
//Legen Sie den Pfad des Bildes fest. Sie können es je nach Pfad in verschiedene Stile ändern styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
brechen;
Fall 2:
styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
brechen;
Fall 3:
styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
brechen;
Fall 4:
styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
brechen;
Fall 5:
styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
brechen;
}
// Da du die Animation links und oben einstellen willst, musst du die Positionierung styleImg.style.position = 'absolute' festlegen.
// Legen Sie die Anfangsposition des Etiketts fest, d. h. die aktuelle Position der Maus. var x = getMousePosition(event).x;
var y = getMousePosition(Ereignis).y;
// Die Koordinaten von styleImg festlegen styleImg.style.top = y + "px";
styleImg.style.left = x + "px";
//Binde testDiv an den Bereich, in dem das aktuelle Mausende wirksam ist. var testDiv = document.getElementById("main");
// Fügen Sie das neue Tag zum Body-Tag der Seite hinzu testDiv.appendChild(styleImg);
// Alles, was über das Limit im Dokument hinausgeht, wird nicht angezeigt, also versuchen Sie, es an das Div auf der Seite zu binden. // Setzen Sie den Überlauf auf „Ausblenden“, um zu verhindern, dass die Maus während der Bewegung die Auf- und Ab-Bildlaufleisten auslöst. testDiv.style.overflow = „ausgeblendet“;
//
Variablenanzahl = 0;
//Die Methode setInterval() ruft eine Funktion auf oder berechnet einen Ausdruck in einem angegebenen Zeitraum (in Millisekunden) var time = setInterval(function(){
// Stellen Sie den Timer so ein, dass die entsprechende Transparenz jedes generierten Etiketts innerhalb des angegebenen Zeitraums geändert wird. count += 5;
styleImg.style.opacity = (100-Anzahl)/100;
}, 30)
// Die Methode setTimeout() wird verwendet, um nach einer angegebenen Anzahl von Millisekunden eine Funktion aufzurufen oder einen Ausdruck zu berechnen.
// Setze einen Verzögerungstimer und lösche den obigen Timer nach einer bestimmten Zeit, damit sich das erstellte Label nicht mehr ändert setTimeout(function(){
//Verwenden Sie clearInterval(), um die Ausführung der Funktion setInterval zu stoppen clearInterval(time);
// Löschen Sie das erstellte Tag testDiv.removeChild(styleImg);
},250)
}
</Skript>
</body>
</html>
PS: Der obige Code wurde von mir selbst geschrieben, nachdem ich viele verschiedene Dokumente zu Rate gezogen hatte. Ich habe keinen Blog für VC geschrieben! Zum Schluss gebe ich Ihnen das Bildmaterial. Solange Sie im obigen Code einfache Änderungen vornehmen, können Sie andere Arten kleiner Schwänze realisieren.
Dies ist das Ende dieses Artikels darüber, wie man mit JavaScript coole Mausschwanzeffekte erzielt. Weitere relevante Inhalte zu JavaScript-Mausschwanzeffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Probleme mit Sperren in MySQL
>>: Beispiel für die horizontale Anordnung von li-Tags in HTML
Artikel empfehlen
19 MySQL-Optimierungsmethoden im Datenbankmanagement
Nach der MySQL-Datenbankoptimierung kann nicht nu...
VUE + SpringBoot implementiert die Paging-Funktion
Dieser Artikel stellt hauptsächlich vor, wie pagi...
Detaillierte Erklärung des Sidecar-Modus in Docker Compose
Inhaltsverzeichnis Was ist Docker Compose Anforde...
So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)
Einführung Wenn eine große Anzahl an Systemen ins...
Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5
1. Rz auf den Server hochladen und entpacken rz [...
Detaillierte Erklärung der Docker-Datenspeichervolumes
Standardmäßig erfolgt das Lesen und Schreiben von...
Informationen zum Textumbruchproblem bei IE-Labels (LI)
Ich habe lange damit gekämpft und nach einiger Suc...
Nginx definiert die Zugriffsmethode für Domänennamen
Ich erstelle derzeit Nginx, kann aber nicht über ...
Detaillierte Erklärung des VueRouter-Routings
Inhaltsverzeichnis Vue-Router 1. Verstehen Sie da...
Detaillierter Installationsprozess der MySQL 8.0 Windows-ZIP-Paketversion
Der Installationsprozess von MySQL 8.0 Windows Zi...
So verwenden Sie Homebrew unter Linux richtig
Viele Leute verwenden Linux Homebrew. Hier sind d...
Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.
Code kopieren Der Code lautet wie folgt: <form...
Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING
Unter Zellenabstand versteht man den Abstand zwis...
So legen Sie den Standardwert eines MySQL-Felds fest
Inhaltsverzeichnis Vorwort: 1. Standardwertbezoge...
Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012
Der Dateiserver ist einer der am häufigsten verwe...