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
Front-End-Statusverwaltung (Teil 1)
Inhaltsverzeichnis 1. Was ist Front-End-Statusver...
Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation
Virtuelle Maschinen sind eine sehr praktische Tes...
js implementiert einen einfachen Rechner
Verwenden Sie natives JS, um einen einfachen Rech...
Beispielanalyse der Ausführungsreihenfolge und Schreibreihenfolge von MySQL-Anweisungen
Die vollständige Syntax der Select-Anweisung laut...
MySQL-Initialisierungskennwortvorgang unter Mac
Eine einfache Aufzeichnung der Datenbank-Startpro...
Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript
Inhaltsverzeichnis Private Klassenfelder in JavaS...
JavaScript imitiert Xiaomi-Karusselleffekt
Dieser Artikel ist eine selbstgeschriebene Nachah...
Detaillierte Erläuterung des Replikationskonfigurationsbeispiels zwischen MySQL-Containern
Hintergrund Letzte Woche hat das Unternehmen eine...
MySQL-unabhängiger Index und gemeinsame Indexauswahl
Häufig fehlt das Verständnis für mehrspaltige Ind...
Das Prinzip und die Richtung von JavaScript
Wie lässt sich feststellen, worauf dies hinweist?...
Mysql verwendet gespeicherte Prozeduren, um schnell Millionen von Datenbeispielcodes hinzuzufügen
Vorwort Um den Unterschied zwischen dem Hinzufüge...
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
Die 10 wichtigsten zeitsparenden Tipps zur Verkürzung der Web-App-Entwicklung (grafisches Tutorial)
In der heutigen Entwicklungsumgebung ist schnell ...
JavaScript ermittelt, ob der Browser IE ist
Als Frontend-Entwickler komme ich an den Tücken d...
Eine kurze Analyse der Verwendung von watchEffect in Vue3
Vorwort Jeder sollte mit der Watch-API in vue2 ve...