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
So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation
1. Traditionelle Binlog-Master-Slave-Replikation,...
Neue Funktionen von Spring Boot 2.4: Detaillierte Erläuterung des Prozesses zum Erstellen eines Docker-Image mit nur einem Klick
Hintergrund Um die Docker-Containerisierung währe...
So erstellen Sie eine Ansicht in MySQL
Grundlegende Syntax Sie können eine Ansicht mit d...
Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus
Überblick Dieser Artikel beginnt mit der Einführu...
Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen
Detaillierte Erklärung des Linux-Befehls vi Der v...
Oberflächliches Webdesign
<br />Ich war schon immer der Meinung, dass ...
Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins
Inhaltsverzeichnis Jenkins-Installation Installie...
Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite
Hier erfahren Sie, wie Sie nach der Verkleinerung...
Häufige Fehler und Lösungen zum Verbinden von Navicat mit einer virtuellen MySQL-Maschine
Frage 1 lösen Starten Sie den Dienst: service mys...
Beispiele für JavaScript-Operationselemente
Weitere Informationen zu Bedienelementen finden S...
VM VirtualBox virtuelle Maschine mounten freigegebenen Ordner
Eine Umgebung Installieren Sie VMware Tools auf C...
Detaillierte Erklärung zweier zu beachtender Punkte bei vue3: Setup
Inhaltsverzeichnis In vue2 In vue3 Hinweise zur E...
Erste Schritte beim Erstellen einer Website für Anfänger - Die Voraussetzungen und Tools, die zum Erstellen einer Website erforderlich sind
Heute werde ich diese Anfängerfragen beantworten: ...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...
Was ist JavaScript Anti-Shake und Throttling
Inhaltsverzeichnis 1. Funktion Entprellung 1. Was...