Heim >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

WBOYOriginal: 2016-05-16 16:26:352480Durchsuche

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" &#63; "Y": "X";
if (typeof window["page" + b + "Offset"] != "undefined")
a[type.toLowerCase()] = window["page" + b + "Offset"];
else {
b = document.documentElement.clientHeight &#63; 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, Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen 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);
}

Demo-Adresse: http://demo.jb51.net/js/2014/Vier Möglichkeiten, JS-Code und Plug-Ins zu verwenden, um den Schneeflockeneffekt in WordPress_Javascript-Fähigkeiten zu erzielen/

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anweisungen zur Verwendung der fs.lstat-Methode in node.js_node.jsNächster Artikel：Anweisungen zur Verwendung der fs.lstat-Methode in node.js_node.js

In Verbindung stehende Artikel

Mehr sehen