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ösung für das Problem einer großen Anzahl von php-cgi.exe-Prozessen auf dem Server, die dazu führen, dass die CPU 100 % belegt
Optimieren Sie die FastCGI-Konfigurationsdatei fc...
Adaptive HTML-Tabellenmethode
<body style="scroll:no"> <Tabe...
Beispielcode für HTML-Layered-Box-Shadow-Effekt
Schauen wir uns zunächst das Bild an: Heute werde...
Was die Website am meisten braucht, ist eine Verbesserung der Erfahrung der Zielgruppe
„Der große Fluss fließt nach Osten, die Wellen sp...
Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript
Inhaltsverzeichnis JavaScript importieren 1. Inte...
CentOS 7-Konfiguration Tomcat9+MySQL-Lösung
Tomcat konfigurieren Installieren Sie zuerst Tomc...
Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur
Öffnen Sie das dekomprimierte Verzeichnis von Tom...
MySQL-Grundanweisungen zum Hinzufügen, Löschen, Ändern und Abfragen
Grammatik Hier ist die allgemeine SQL-Syntax für ...
Zusammenfassung der Mysql Hochleistungsoptimierungsfähigkeiten
Datenbank-Befehlsspezifikation Alle Datenbankobje...
Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile
rm-Befehl Der Befehl rm wird von den meisten Benu...
Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags
1. Blockebenenelement: bezieht sich auf die Fähigk...
Lösung für die leere Zeile vor der UTF-8-codierten Webseite, wenn sie Dateien enthält
<br />Die Seite verwendet die UTF8-Kodierung...
Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers
Hintergrund Ein spezielles Gerät wird verwendet, ...
Verwenden Sie Bilder, um eine personalisierte Unterstreichung von Hyperlinks zu realisieren
Seien Sie nicht überrascht, wenn Sie im Bild eine ...
Verwendung des Zielattributs des HTML-Tags a
1: Wenn Sie das Tag <a> zum Verlinken auf ei...