JavaScript zum Erreichen eines Mouse-Tailing-Effekts
|
Mauseffekte erfordern die Verwendung von setTimeout, um Knoten zu festgelegten Zeiten zu generieren, Knoten zu löschen und den generierten Knoten zufällige Breiten, Höhen und Farben zuzuweisen, sodass jeder Effektknoten anders aussieht. Hinweis: Der generierte Knoten muss absolut positioniert sein, sodass er außerhalb des Dokumentflusses liegt und die Position anderer Elemente auf der Seite nicht beeinflusst. Codebeispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Mauseffekte</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
Körper {
Hintergrundfarbe: #9df;
Überlauf: versteckt;
Höhe: 100vh;
}
Spanne {
Höhe: 30px;
Breite: 30px;
Randradius: 50 %;
Position: absolut;
Zeigerereignisse: keine;
transformieren: übersetzen(-50 %, -50 %);
Kastenschatten: 10px 10px 30px #45f, -10px -10px 30px #d80;
Animation: Box 5s linear unendlich;
Z-Index: 3;
}
@keyframes box {
0% {
transformieren: übersetzen(-50 %, -50 %);
Deckkraft: 1;
Filter: Farbton-Drehung (0 Grad);
}
100 % {
transformieren: übersetzen(-50 %, -1000 %);
Deckkraft: 1;
Filter: Farbton-Drehung (720 Grad);
}
}
</Stil>
</Kopf>
<Text>
</body>
</html>
<Skript>
document.addEventListener("Mausbewegung", Funktion(e) {
var body = document.querySelector("body");
var span = document.createElement("span");
var x = e.offsetX
var y = e.offsetY
span.style.left = x + "px"
span.style.top = y + "px";
konsole.log(x + ">>>" + y)
var a = Math.random() * 30;
span.style.width = 30 + a + "px";
span.style.height = 30 + a + "px";
body.anhängenKind(span);
setzeTimeout(Funktion() {
span.entfernen();
// konsole.log("ok")
}, 4500)
})
</Skript>Laufergebnisse:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Gespeicherte MySQL-Prozeduren und allgemeine Funktionscodeanalyse
Artikel empfehlen
Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux
Inhaltsverzeichnis Hintergrund 1) Aktivieren Sie ...
js+css zur Realisierung eines dreistufigen Navigationsmenüs
In diesem Artikelbeispiel wird der spezifische Co...
Linux Dateisystemtyp anzeigen Beispielmethode
So überprüfen Sie den Dateisystemtyp einer Partit...
Bedingte Kommentare im Internet Explorer für XHTML
<br />Bedingte Kommentare sind eine einzigar...
Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)
Gemeinsamer Index Die Definition des gemeinsamen ...
Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Artikel finden Sie das Tutorial zur Ins...
WeChat-Applet-Canvas implementiert Signaturfunktion
Im WeChat-Applet-Projekt umfasst das Entwicklungs...
MySQL 8.0.19 Installations- und Konfigurations-Tutorial unter Windows 10
Ich werde nächstes Semester MySQL lernen. Ich hab...
Detaillierte Erklärung der JavaScript-Datentypen
Inhaltsverzeichnis 1. Literale 1.1 Numerische Lit...
Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen
Vorwort Die MySQL-Datenbanksperre ist ein wichtig...
Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung
Wenn Sie benutzerdefinierte Zabbix-Skripte zum Sa...
So implementieren Sie die Stapellöschung großer Datenmengen in großen MySQL-Tabellen
Die Frage wird zitiert von: https://www.zhihu.com...
Regelmäßige JavaScript-Implementierungsmethode zur Überprüfung der Kennwortstärke
ausstellen Design Passwortstärke-Analyse Das Pass...
Beispiele für die Erstellung und Verwendung von MySQL-Triggern
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
Detaillierte grafische Erläuterung der Hadoop-Installation und -Konfiguration basierend auf Linux7
Bereiten Sie die Zutaten wie oben gezeigt vor (ps...