Web-Frontend
js-Tutorial
Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen
Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen
Der Winter ist da und viele Blogbereiche haben Schneeflockeneffekte hinzugefügt, also habe ich mir angeschaut, wie sie die Effekte umgesetzt haben. Da es mehrere Effektcodes gibt, habe ich sie mitgebracht. Freunde in Not können sie übernehmen und ausprobieren.
Großes Bild von Schneeflocken:
Effektcode eins
<script type="text/javascript" language="javascript">
(function() {
function k(a, b, c) {
if (a.addEventListener) a.addEventListener(b, c, false);
else a.attachEvent && a.attachEvent("on" + b, c)
}
function g(a) {
if (typeof window.onload != "function") window.onload = a;
else {
var b = window.onload;
window.onload = function() {
b();
a()
}
}
}
function h() {
var a = {};
for (type in {
Top: "",
Left: ""
}) {
var b = type == "Top" ? "Y": "X";
if (typeof window["page" + b + "Offset"] != "undefined")
a[type.toLowerCase()] = window["page" + b + "Offset"];
else {
b = document.documentElement.clientHeight ? document.documentElement: document.body;
a[type.toLowerCase()] = b["scroll" + type]
}
}
return a
}
function l() {
var a = document.body,
b;
if (window.innerHeight) b = window.innerHeight;
else if (a.parentElement.clientHeight) b = a.parentElement.clientHeight;
else if (a && a.clientHeight) b = a.clientHeight;
return b
}
function i(a) {
this.parent = document.body;
this.createEl(this.parent, a);
this.size = Math.random() * 5 + 5;
this.el.style.width = Math.round(this.size) + "px";
this.el.style.height = Math.round(this.size) + "px";
this.maxLeft = document.body.offsetWidth - this.size;
this.maxTop = document.body.offsetHeight - this.size;
this.left = Math.random() * this.maxLeft;
this.top = h().top + 1;
this.angle = 1.4 + 0.2 * Math.random();
this.minAngle = 1.4;
this.maxAngle = 1.6;
this.angleDelta = 0.01 * Math.random();
this.speed = 2 + Math.random()
}
var j = false;
g(function() {
j = true
});
var f = true;
window.createSnow = function(a, b) {
if (j) {
var c = [],
m = setInterval(function() {
f && b > c.length && Math.random()
< b * 0.0025 && c.push(new i(a)); ! f && !c.length && clearInterval(m);
for (var e = h().top, n = l(), d = c.length - 1; d >= 0; d--)
if (c[d]) if (c[d].top < e || c[d].top + c[d].size + 1 > e + n) {
c[d].remove();
c[d] = null;
c.splice(d, 1)
} else {
c[d].move();
c[d].draw()
}
},
40);
k(window, "scroll",
function() {
for (var e = c.length - 1; e >= 0; e--) c[e].draw()
})
} else g(function() {
createSnow(a, b)
})
};
window.removeSnow = function() {
f = false
};
i.prototype = {
createEl: function(a, b) {
this.el = document.createElement("img");
this.el.setAttribute
("src", b + "雪花图片的绝对链接地址");
this.el.style.position = "absolute";
this.el.style.display = "block";
this.el.style.zIndex = "99999";
this.parent.appendChild(this.el)
},
move: function() {
if (this.angle < this.minAngle || this.angle > this.maxAngle)
this.angleDelta = -this.angleDelta;
this.angle += this.angleDelta;
this.left += this.speed * Math.cos(this.angle * Math.PI);
this.top -= this.speed * Math.sin(this.angle * Math.PI);
if (this.left < 0) this.left = this.maxLeft;
else if (this.left > this.maxLeft) this.left = 0
},
draw: function() {
this.el.style.top = Math.round(this.top) + "px";
this.el.style.left = Math.round(this.left) + "px"
},
remove: function() {
this.parent.removeChild(this.el);
this.parent = this.el = null
}
}
})();
createSnow("", 40);
</script>Kopieren Sie den obigen Code und fügen Sie ihn direkt in die Kopf- oder Fußzeilendatei im Theme ein. Wenn Sie nur die Artikelseite anzeigen möchten, fügen Sie ihn einfach direkt zu single hinzu. Nachfolgend stellen wir allen Schneeflockenbilder (erforderliche Materialien) zur Verfügung, 
kleine Bilder: Sie müssen sie zum aktuellen Thema Ihres Blogs hochladen und dann den Link im Code in die Position des Bildes ändern. Der Effekt ist wie auf dieser Seite dargestellt.
Effektcode zwei:
<html>
<head>
<script>
function start(){
var array=new Array();
var canvas=document.getElementById("mycanvas");
var context=canvas.getContext("2d");
for(var i=0;i<50;i++){
var ShowVier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen=new showVier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen();
array.push(ShowVier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen);
}
time=setInterval(function (){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].draw(context);
}
},500);
}
function showVier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen(){
var y=parseInt(Math.random()*50)*10;
var x=parseInt(Math.random()*80)*10;
this.draw=function(context){
context.font="50px Calibri";
context.fillText("*",x,y);
}
this.move=function(){
y+=20;
if(y>600){
y=0;
}
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>Dieser Effekt zeigt sich wie folgt (es fühlt sich hässlich an, nicht empfohlen):
Effektcode drei
Tatsächlich können Sie auch das Plug-in „let it Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen“ verwenden, um fallende Schneeflocken auf Ihrem WordPress-Blog zu implementieren.
Ich werde hier nicht näher auf die Verwendung des Let It Snow-Plug-Ins eingehen. Es unterscheidet sich nicht von anderen Plug-In-Installationen. Sie können die Dateien im Let It Snow-Ordner direkt herunterladen und hochladen /wp-content/plugins/-Verzeichnis und dann Um dieses Plug-in zu aktivieren, legen Sie einfach das Plug-in im WordPress-Admin-Panel-Menü fest. Oder Sie können es finden, indem Sie direkt in der Back-Plug-In-Bibliothek suchen.
Let it Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen offizielle Website: Klicken Sie hier, um es zu besuchen
Effektcode vier
Ich habe im Internet ein sehr leistungsfähiges SnowStorm-Plug-in gesehen. Es ist großartig. Es scheint, dass die Suche nach „let it Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen“ bei Google den Code für Schnee- und Frosteffekte ergibt. Wenn Sie der Meinung sind, dass die Kinderschuhe gut sind, können Sie sie auf der offiziellen Website ausprobieren.
Ich habe im Internet einen einfachen Code für einen zufälligen Schneeflocken-Falleffekt gefunden, den ich mit Ihnen teilen möchte (dieser Effekt ist in reinem Code geschrieben. Schneeflocken sind *.):
Lassen Sie uns kurz einige der darin enthaltenen Funktionen erklären:
1. letItSnow()
Es schneit (dieser Satz ist immer noch nutzlos). Rufen Sie dann createSnow auf, um Schneeflocken zu erzeugen.
2. createSnow()
Generieren Sie Schneeflocken. Fügen Sie ein „*“ ein, um Schneeflocken zu simulieren (die Kopie von Google kann nicht heruntergeladen werden, sie wird tatsächlich als Leerzeichen angezeigt, ich bin so überrascht ... ) und legen Sie es dann in einen großen Container namens Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox, und die generierten Personen werden in iArray verschoben und gesammelt. Die Schneeflocke verwendet die absolute Positionierungsmethode basierend auf der SnowBox. Die Oberseite ist 0px und die linke Seite verwendet Math.random()*window.screen.width, sodass die Schneeflocke zufällig in der Bildschirmbreite generiert wird.
Verwenden Sie Farbe, um die Farbtiefe von Schneeflocken zu steuern und eine Schärfentiefe im Bereich von 0 bis 200 zu erzeugen
Verwenden Sie „fontSize“, um die Größe der Schneeflocken im Bereich von 10 bis 15 Pixel
zu steuern
Nutzen Sie die Zeit, um das Aufrufintervall von Snowflake Falling zu steuern, das zwischen 40 ms und 50 ms liegt
Verwenden Sie Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenInterval, um den Abstand zwischen Schneeflocken zu steuern, der zwischen 500 ms und 1000 ms liegt
Dann ruft es sich selbst rekursiv auf und erzeugt kontinuierlich Schneeflocken.
3. fallDown()
Wie der Name schon sagt, sollen Schneeflocken fallen. Die Fallgeschwindigkeit beträgt 2 Pixel, das heißt, jedes Mal, wenn sie vertikal fallen, beträgt die Geschwindigkeit 2 Pixel. Führen Sie zu diesem Zeitpunkt einen Test durch. Wenn die Schneeflocke auf eine feste Höhe fällt, also höher als der übergeordnete Container, kann dies den Druck auf den Browser verringern und langsamer. Es wurde von overflow:hidden aus dem Blickfeld entfernt. Rufen Sie dann beim vertikalen Abstieg eine windBlow-Funktion auf, damit die Schneeflocken künstlerischer fallen.
4. windBlow()
Der Name scheint wie ein wehender Wind zu sein, aber in Wirklichkeit handelt es sich um die Wirkung des wehenden Windes (das ist noch nutzloser. Haha.), indem mit Math.sin() der Effekt von in der Luft schwebenden Schneeflocken erzeugt wird. Damit die Schneeflocken keine eintönigen, geraden Linien bilden, fallen sie in einer Serpentinenform, damit die Kontinuität besser ist und sie angenehmer aussehen.
function letItSnow(){
var Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox=document.getElementById("Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox");
var iArray=new Array();
createSnow(Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox,iArray);
}
function fallDown(temObj,iArray){
var speed=2;
var top=parseInt(temObj.style.top);
if(top>510){//当到超过高度时候就删了它，减轻浏览器压力
for(var i=0;i<iArray.length;i++){
if(temObj==iArray[i]){
iArray.splice(i,1);
var Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox=document.getElementById("Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox");
Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox.removeChild(temObj);
return false;
}
}
}
temObj.style.top=top+speed+"px";
var wind=windBlow(temObj,top);
temObj.style.left=parseInt(temObj.style.left)+wind*2+"px";
}
function windBlow(temObj,top){
if(parseInt(Math.random())%2==1)
return Math.sin(top/16);
else return Math.cos(top/16);
}
function createSnow(Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox,iArray){
var temObj=document.createElement("i");
var temText=document.createTextNode("*");
temObj.appendChild(temText);
temObj.style.left=parseInt(Math.random()*window.screen.width)+"px";
temObj.style.top="0px";
var temNum=parseInt(Math.random()*200);
temObj.style.color="#"+temNum.toString(16)+temNum.toString(16)+temNum.toString(16);
iArray.push(temObj);
Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox.appendChild(temObj);
var temNum=0;
while(temNum<10){
temNum=parseInt(Math.random()*15);
}
temObj.style.fontSize=temNum+"px";
var time=0;
while(time<40){
time=parseInt(Math.random()*50);
}
temObj.timer=setInterval(function(){
fallDown(temObj,iArray);
},time);
var Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenInterval=0;
while(Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenInterval<500){
Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenInterval=parseInt(Math.random()*1000);
}
var createTimer=setTimeout(function(){
createSnow(Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenBox,iArray);
clearTimeout(createTimer);
},Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielenInterval);
}Okay, damit sind die vier Effektcodes beendet. Ich hoffe, es kann Freunden in Not helfen. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Mar 09, 2025 am 12:11 AM
Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
10 JQuery Fun- und Games -Plugins
Mar 08, 2025 am 12:42 AM
10 Fun JQuery Game -Plugins, um Ihre Website attraktiver zu machen und die Stickinität der Benutzer zu verbessern! Während Flash immer noch die beste Software für die Entwicklung von lässigen Webspielen ist, kann JQuery auch überraschende Effekte erzielen und zwar nicht mit reinen Action -Flash -Spielen vergleichbar sind, aber in einigen Fällen können Sie auch einen unerwarteten Spaß in Ihrem Browser haben. JQuery Tic Toe Game Die "Hello World" der Game -Programmierung hat jetzt eine Jquery -Version. Quellcode JQuery Crazy Word Kompositionsspiel Dies ist ein Spiel mit der Füllung, und es kann einige seltsame Ergebnisse erzielen, da das Wort nicht kennt. Quellcode JQuery Mine Sweeping Game
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
JQuery Parallax Tutorial - Animated Header Hintergrund
Mar 08, 2025 am 12:39 AM
Dieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später. Laden Sie die herunter
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Erste Schritte mit Matter.js: Einführung
Mar 08, 2025 am 12:53 AM
Matter.js ist eine in JavaScript geschriebene 2D -Motorhilfe -Physik -Engine. Diese Bibliothek kann Ihnen helfen, die 2D -Physik in Ihrem Browser problemlos zu simulieren. Es bietet viele Merkmale, wie die Möglichkeit, starre Körper zu erstellen und physikalische Eigenschaften wie Masse, Fläche oder Dichte zuzuweisen. Sie können auch verschiedene Arten von Kollisionen und Kräften simulieren, wie z. B. die Schwerkraft Reibung. Matter.js unterstützt alle Mainstream -Browser. Darüber hinaus ist es für mobile Geräte geeignet, da es Berührungen erkennt und reagiert. Alle diese Funktionen machen es Ihre Zeit wert, zu lernen, wie man die Engine benutzt. In diesem Tutorial werde ich die Grundlagen dieser Bibliothek, einschließlich ihrer Installation und Nutzung, behandeln und a bereitstellen
Automatische Aktualisierung der Div -Inhalte mit JQuery und Ajax
Mar 08, 2025 am 12:58 AM
Dieser Artikel zeigt, wie Sie den Inhalt eines DIV automatisch alle 5 Sekunden mit JQuery und Ajax aktualisieren können. Das Beispiel holt und zeigt die neuesten Blog -Beiträge aus einem RSS -Feed zusammen mit dem letzten Aktualisierungstempel. Ein Ladebild ist Optiona
