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
Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung
Dieser Artikel beschreibt, wie Sie einen sekundär...
Bootstrap 3.0 Studiennotizen Grid-System-Fall
Vorwort Im vorherigen Artikel haben wir hauptsäch...
MySQL Online-DDL-Tool Gh-Ost-Prinzipanalyse
Inhaltsverzeichnis 1. Einleitung 1.1 Grundsatz 1....
Beispiel für die Verwendung von CSS3 zum Anpassen des Stils eines Eingabe-Mehrfachauswahlfelds
Prinzip: Blenden Sie zuerst das Eingabeelement au...
So verhindern Sie die Weiterleitung von Hyperlinks mithilfe von JavaScript (mehrere Schreibweisen)
Durch JavaScript können wir das Springen von Hype...
Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers
Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...
So verbinden Sie die Idee mit Docker, um eine Bereitstellung mit einem Klick zu erreichen
1. Ändern Sie die Docker-Konfigurationsdatei und ...
Implementierung der MySQL-Benutzerrechteverwaltung
1. Einführung in MySQL-Berechtigungen Es gibt 4 T...
Detaillierte Erläuterung der Js-Klassenkonstruktion und Vererbungsfälle
Die Definition und Vererbung von Klassen in JS si...
Tipps zur Verwendung von Bildlaufleisten in HTML
Als wir heute das Pressemitteilungssystem von Niu ...
Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht
Vorwort Jede Anwendung, die in JavaScript geschri...
JavaScript implementiert das Topfschlagen-Spiel von Gray Wolf
1. Projektdokumente 2. Verwenden Sie HTML und CSS...
Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften
Zunächst müssen Sie einige Eigenschaften von HTML...
Zeilen- und spaltenübergreifende Operationen in HTML-Tabellen (Rowspan, Colspan)
Im Allgemeinen wird das Colspan-Attribut des <...
JS Leicht verständliche Funktion und Konstruktor
Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...