jQuery-Plugin zum Erzielen eines Code-Rain-Effekts
|
In diesem Artikel wird der spezifische Code des jQuery-Plug-Ins zur Erzielung des Code-Regen-Spezialeffekts zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt Code-RegeneffektBietet eine allgemeine Vorstellung. Obwohl sich die Wirkung vom Ziel unterscheidet, ist es einfach, daraus zu lernen und sie in die entsprechende Wirkung umzuwandeln. Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Lassen Sie einen Code regnen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
Benutzerauswahl: keine;
}
#div{
Position: fest;
oben: 0px;
unten: 0px;
links: 0px;
rechts: 0px;
Hintergrundfarbe: schwarz;
Z-Index: 1;
}
.Artikel{
Schriftgröße: 12px;
Position: absolut;
oben: 0px;
unten: 0px;
Farbe: #2ecc71;
-webkit-Schreibmodus:vertikal-lr;
/* Animation: 0,9 s linear nach unten; */
}
/* Animationsrahmen zeichnen */
@keyframes runter{
aus{}
Zu{
Deckkraft: 0;
oben: 100 %;
}
}
</Stil>
</Kopf>
<Text>
<div id="div">
</div>
</body>
</html>
<Skript>
var count = 15 // Wie viele Datensätze werden jedes Mal generiert var time = 200 // Aktualisierungsintervall var num = 15 // Wie viele Zeichen werden höchstens generiert var span = 1000 // Dauer des Animationseffekts für jeden Datensatz var tdown = 900 // Wie lange dauert jede Animation höchstens $(document).ready(function(){
setzeIntervall(Funktion(){
für(var i = 0;i<Anzahl;i++){
var str = getchar(num) // Erzeuge zufällig verstümmelte Zeichen drawitem(str) // Erzeuge zufällig Dom und füge dann einen Animationseffekt hinzu }
},Zeit)
})
Funktion Drawitem (str) {
var op = parseFloat((Math.random()*1).toFixed(2)); //anfängliche Transparenz var top = Math.floor(Math.random()*100) //anfängliche Höhe var left = Math.floor(Math.random()*100) //anfänglicher linker Abstand var $item = $("<div class='item'>"+str+"</div>");
$item.appendTo($("#div"));
var tspan = parseFloat(Math.floor(Math.random()*tdown)/1000)
tspan=tspan<=0,5?0,5:tspan
$item.css({
'oben':oben+'%',
'links':links+'%',
'Deckkraft':op,
'Animation': 'nach unten '+tspan+'s linear'
})
setzeTimeout(Funktion(){
$item.entfernen();
},Spanne)
}
Funktion getchar(num){//Eine Reihe von zufälligen Zeichen generieren num=num==undefined?1:Math.floor(Math.random()*num);
var str = "";
für(var i = 0;i<num;i++){
var n = Math.floor(Math.random()*256)
n =String.vonCharCode(n);
str+=n;
}
gibt str zurück;
}
</Skript>Erklärung der Ideen Der Code enthält Kommentare 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:
|
<<: Detaillierte Analyse der Replikation in MySQL
Artikel empfehlen
Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags
Die Docker-Image-ID ist eindeutig und kann ein Im...
MySQL Master-Slave-Daten sind inkonsistent, Eingabeaufforderung: Slave_SQL_Running: Keine Lösung
Dieser Artikel beschreibt anhand eines Beispiels ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11
Die Installations- und Konfigurationsmethoden von...
CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln
Ursprünglicher Link https://github.com/XboxYan/no...
Analyse der Schwierigkeiten im Hot-Standby der MySQL-Datenbank
Ich habe Ihnen zuvor die Konfigurationsmethode fü...
Detaillierte Erklärung der Datenmengen von Docker-Containern
Was ist Schauen wir uns zunächst das Konzept von ...
Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?
Bevor wir dieses Problem verstehen, schauen wir u...
JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen
1. Warum diesen Artikel schreiben? Sie haben sich...
Detaillierte Zusammenfassung von MySQL und verbindungsbezogenen Timeouts
MySQL und verbindungsbezogene Timeouts Vorwort: H...
Lösen Sie das Problem „Willkommen bei nginx auf Fedora!“. Nach der Installation von nginx auf Centos7 befindet sich im Verzeichnis conf.d keine Datei default.conf.
Problembeschreibung Installieren Sie nginx auf Te...
Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung
1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...
Vue implementiert das Ziehen und Sortieren von Bildern
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Diskussion über die VUE Uni-App-Entwicklungsumgebung
Inhaltsverzeichnis 1. Über die visuelle Schnittst...
HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste
Wirkung Die Bilder im Code können selbst geändert...
Detaillierter Code zum Erstellen eines Mehrpersonen-Video-Chat-Dienstes basierend auf WebRTC unter Ubuntu
WebRTC steht für Web Real-Time Communication und ...