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:

Allgemeine Array-Operationen in JavaScript
Eine einfache und eingehende Studie zu Async und Await in JavaScript
JavaScript-Implementierung des klassischen Schlangenspiels
Javascript-Grundlagen zu integrierten Objekten
Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop
Vergleich zwischen Python-Coroutinen und JavaScript-Coroutinen
JavaScript zum Erzielen eines einfachen Drag-Effekts
Detaillierte Erklärung der JavaScript-Array-Deduplizierung
JavaScript zur Implementierung des Flugzeugkriegsspiels
JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde
Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters
Ein kurzer Vortrag über die Variablenförderung in JavaScript
Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript
8 wichtige JavaScript-Codefragmente für Ihr Projekt

<<: Gespeicherte MySQL-Prozeduren und allgemeine Funktionscodeanalyse

>>: Analyse des benutzerdefinierten Überwachungs- und Alarmimplementierungsprozesses von Linux Zabbix

So sichern und wiederherstellen Sie die MySQL-Datenbank, wenn sie zu groß ist

JavaScript zum Erreichen eines Mouse-Tailing-Effekts

So sichern und wiederherstellen Sie die MySQL-Datenbank, wenn sie zu groß ist

Einführung und Installation von MySQL Shell

MySql-Entwicklung einer automatischen Synchronisierungstabellenstruktur

Detaillierte Erläuterung der MySQL-Hochverfügbarkeitsarchitektur

Eine kurze Analyse des Problems, dass MySQL bei der Bereitstellung mit Docker-Compose nicht zugänglich ist

CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten

So konfigurieren Sie eine JDK-Umgebung unter Linux

So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework

Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern

Artikel empfehlen

Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung

Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

Easyswoole Ein-Klick-Installationsskript und Pagoden-Installationsfehler

js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung

Tipps zur HTML-Formatierung und langen Dateien für das Webdesign

Detaillierte Erläuterung gängiger Methoden von JavaScript Array

Probleme mit der NodeJS-, Koa- und Typescript-Integration und dem automatischen Neustart

Mysql | Detaillierte Erklärung der Fuzzy-Abfrage mit Platzhaltern (wie, %, _)

CSS3 erzielt verschiedene Randeffekte

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

Beispiel für die Anpassung des Vue-Projekts an den großen Bildschirm

Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen

Verwendung des Linux-Telnet-Befehls

So erstellen Sie einen Nginx-Server mit Docker