In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit JS und JQuery den Animationseffekt fallender Schneeflocken erzielen. Freunde in Not können ihn retten.
Viele Freunde müssen den Effekt fallender Schneeflocken nutzen, wenn sie Webseiten mit Spezialeffekten erstellen. Hier haben wir für Sie zusammengestellt, wie Sie diesen Effekt mithilfe von JS- und JQuery-Codes erzielen können.
Werfen wir zunächst einen Blick auf den Schneeflockeneffekt, der implementiert werden muss:
Der dieses Mal implementierte Effekt des fallenden Schnees ist sehr einfach, hauptsächlich zum Üben JavaScript. Timer, setTimeout und setInterval.
Erklärung
setTimeout()
Mit der setTimeout-Funktion wird die Anzahl der Millisekunden angegeben, nach denen eine Funktion oder ein bestimmter Code ausgeführt wird. Es gibt eine Ganzzahl zurück, die die Timer-Nummer darstellt und zum späteren Abbrechen des Timers verwendet werden kann.
var timerId = setTimeout(func|code, delay)
Im obigen Code akzeptiert die setTimeout-Funktion zwei Parameter. Der erste Parameter func|code ist der Name der Funktion oder eines Codeabschnitts, der verzögert werden soll, und der zweite Parameter „delay“ ist die Anzahl der Millisekunden die Ausführung verzögern.
setInterval()
Die Verwendung der setInterval-Funktion ist genau die gleiche wie die von setTimeout. Der einzige Unterschied besteht darin, dass setInterval angibt, dass eine bestimmte Aufgabe von Zeit zu Zeit ausgeführt werden soll. Das ist eine unbegrenzte Anzahl geplanter Hinrichtungen.
clearTimeout(), clearInterval()
setTimeout- und setInterval-Funktionen geben alle einen ganzzahligen Wert zurück, der die Zählernummer darstellt, um das entsprechende Timing-Gerät abzubrechen.
var id1 = setTimeout(f,1000); var id2 = setInterval(f,1000); clearTimeout(id1); clearInterval(id2);
Hinweis:
setTimeout und setInterval müssen warten, bis die Synchronisierungsaufgaben des aktuellen Skripts und die vorhandenen Ereignisse in der „Aufgabenwarteschlange“ alle verarbeitet sind, bevor die durch setTimeout angegebene Aufgabe ausgeführt wird.
Lassen Sie uns weiter über die Wirkung fallender Schneeflocken sprechen
Die Hauptschritte sind die folgenden 4 Schritte:
1 Definieren Sie eine Schneeflockenvorlage
2. Stellen Sie den ersten Timer ein, einen periodischen Timer, der ab und zu eine Schneeflocke erzeugt . Stil, um die Schneeflocken in Bewegung zu setzen.
4. Stellen Sie den dritten Timer ein und löschen Sie die Schneeflocken, wenn sie fallen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #000;
/*防止出现向下滚动条*/
overflow: hidden;
}
</style>
</head>
<body>
<script>
function snow() {
// 1、定义一片雪花模板
var flake = document.createElement('p');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerHTML = '❆';
flake.style.cssText = 'position:absolute;color:#fff;';
//获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = window.innerWidth;
//定义生成一片雪花的毫秒数
var millisec = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 5 + 20 * Math.random();
//随机生成雪花下落持续时间
var durationTime = 4000 + 7000 * Math.random();
//随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random();
//随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random();
//克隆一个雪花模板
var cloneFlake = flake.cloneNode(true);
//第一次修改样式，定义克隆出来的雪花的样式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;
`;
//拼接到页面中
document.body.appendChild(cloneFlake);
//设置第二个定时器，一次性定时器，
//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
setTimeout(function() {
//第二次修改样式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};
`;
//4、设置第三个定时器，当雪花落下后，删除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0);
}, millisec);
}
snow();
</script>
</body>
</html>Hinweis: Da das vom Timer hinzugefügte Ereignis in der nächsten Ereignisschleife ausgeführt wird, besteht die Rolle des zweiten Timers darin, die generierten Schneeflocken in die Seite einzubinden und sie zuerst zu rendern . Ändern Sie schließlich den Stil, damit er den gesamten JS-Code ausführen kann, bevor er die Seite rendert. Dies ist nicht der Fall etwas mit dem Thread des Browsers zu tun. Einfach ausgedrückt bedeutet dies, dass mit diesem Timer der Code zum Ändern des Stils zweimal separat ausgeführt werden kann. Sie können zuerst den ersten geänderten Stil rendern und dann die zweite Änderung vornehmen, und die Schneeflocke wird ausgeführt Es wird sich bewegen. JQuery-Version<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #000;
/*防止出现向下滚动条*/
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
function snow() {
//1、定义一片雪花模板
var flake = $("<p>").css({
"position": "absolute",
"color": "#fff"
}).html("❄");
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = $(document).width();
//获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = $(document).height();
//定义生成一片雪花的毫秒数
var millisec = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() {
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 5 + 20 * Math.random();
//随机生成雪花下落持续时间
var durationTime = 4000 + 7000 * Math.random();
//随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random();
//随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random();
//3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
flake.clone().appendTo($("body")).css({
"left": startLeft,
"opacity": startOpacity,
"font-size": flakeSize,
"top": "-25px",
}).animate({ //执行动画
"left": endLeft,
"opacity": endOpacity,
"top": documentHieght
}, durationTime, function() {
//4、当雪花落下后，删除雪花。
$(this).remove();
});
}, millisec);
};
snow();
</script>
</body>
</html>Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:
So verwenden Sie Routing-Parameter zur Übergabe von Vue
So implementieren Sie ein Dropdown-Menü in jQuery
So verwenden Sie die Swiper-Komponente im WeChat-Applet
So verwenden Sie die Vue.use()-Komponente über die globale Methode
Das obige ist der detaillierte Inhalt vonWie man mit JQuery Schneeflocken fallen lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheApr 29, 2025 am 12:51 AMJavaScript stammt aus dem Jahr 1995 und wurde von Brandon Ike erstellt und realisierte die Sprache in C. 1.C-Sprache bietet Programmierfunktionen auf hoher Leistung und Systemebene für JavaScript. 2. Die Speicherverwaltung und die Leistungsoptimierung von JavaScript basieren auf C -Sprache. 3. Die plattformübergreifende Funktion der C-Sprache hilft JavaScript, auf verschiedenen Betriebssystemen effizient zu laufen.
Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AMJavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.
Die Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AMZu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.
Python vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AMSowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AMJa, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.
JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AMJavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.
C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AMC und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.
Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AMJavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
Dreamweaver Mac
Visuelle Webentwicklungstools
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
