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
JavaScript implementiert den detaillierten Prozess der Stapelstruktur
Inhaltsverzeichnis 1. Die Stapelstruktur verstehe...
Vorgänge der Kommunikation zwischen Docker-Containern und der externen Netzwerkkommunikation
Kommunikation zwischen Containern 1. Netzwerkfrei...
Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen
Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...
Eine kurze Analyse der startReactApplication-Methode von React Native
In diesem Artikel haben wir den Startvorgang von ...
js, um einen einfachen Kalendereffekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Lösen Sie das MySQL 5.7.9 Version sql_mode=only_full_group_by Problem
MySQL 5.7.9 Version sql_mode=only_full_group_by P...
Verwenden Sie die mail()-Funktion von PHP zum Senden von E-Mails
Senden von E-Mails mit der Mail-Funktion von PHP ...
Detailliertes Tutorial zur Installation der MySQL v5.7.18-Dekomprimierungsversion
Laden Sie MySQL herunter https://dev.mysql.com/do...
Installations-Tutorial zur komprimierten Version von MySQL 8.0.11
In diesem Artikel finden Sie das Installations-Tu...
Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?
Vorwort Als grundlegende Datenstruktur spielen Ar...
Praxis der Verwendung von SuperMap in Vue
Inhaltsverzeichnis Vorwort Ressourcen zum Thema V...
Detaillierte Erklärung zur Migration einer MySQL-Datenbank auf einen anderen Computer
1. Suchen Sie zunächst die Datendatei auf dem Mig...
Detailliertes Installationstutorial von Docker unter CentOS
Docker ist in CE und EE unterteilt. Die CE-Versio...
Detaillierte Erklärung zum Problem der CSS-Klassennamen
Die folgenden CSS-Klassennamen, die mit einer Zah...
Implementierung der Festlegung einer festen IP beim Starten eines Docker-Containers
Netzwerktyp nach der Docker-Installation [root@in...