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
Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text
Ich habe es im MSI-Format installiert, hauptsächl...
Beispieltest MySQL-Enumerationstyp
Bei der Entwicklung eines Projekts stößt man häuf...
JavaScript zur Implementierung der Webversion des Schlangenspiels
In diesem Artikel wird der spezifische Code für J...
Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten
Inhaltsverzeichnis Auf der offiziellen React-Webs...
Zusammenfassung der Fallstricke, die Ihnen bei der Entwicklung von WeChat-Applets möglicherweise noch nicht begegnet sind
Inhaltsverzeichnis getApp() Definieren Sie Variab...
MySQL GROUP_CONCAT-Einschränkungslösung
Wirkung: Die Funktion GROUP_CONCAT kann einen Fel...
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
Beispielcode zur Implementierung einer Upload-Komponente mit Vue3
Inhaltsverzeichnis Allgemeine Entwicklung von Upl...
CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)
Wirkung Um HTML zu implementieren, bereiten Sie z...
So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein
1. Geschäftshintergrund Die Verwendung einer Mask...
Webdesign-Dimensionen und Regeln für die Werbegestaltung auf Webseiten
1. Unter 800 x 600 gibt es keine horizontale Bild...
Der Unterschied zwischen HTML Empty Link href="#" und href="javascript:void(0)"
# enthält eine Standortinformation. Der Standardan...
So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann
Als ich heute nach einer Seite auf Baidu suchte, d...
Tutorial zur Installation von MySQL 5.7.18 mit einem RPM-Paket
System: CentOS 7 RPM-Pakete: mysql-community-clie...