Maison >interface Web >js tutoriel >Quatre façons d'utiliser le code js et les plug-ins pour obtenir l'effet de chute de flocon de neige dans les compétences wordpress_javascript
Quatre façons d'utiliser le code js et les plug-ins pour obtenir l'effet de chute de flocon de neige dans les compétences wordpress_javascript
- WBOYoriginal
- 2016-05-16 16:26:352495parcourir
L'hiver est là, et de nombreux espaces de blog ont ajouté des effets de flocon de neige, alors je suis allé voir comment ils ont implémenté ces effets. Il existe plusieurs codes d'effet, je les ai donc apportés. Les amis dans le besoin peuvent les prendre en main et les essayer.
Grande image des flocons de neige :
Code d'effet un
<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>
Copiez et collez le code ci-dessus directement dans le fichier d'en-tête ou de pied de page du thème. Si vous souhaitez uniquement que la page de l'article soit affichée, ajoutez-la simplement directement au single. Ci-dessous, nous fournissons à tout le monde des images de flocons de neige (matériel requis), 
petites images : vous devez les télécharger sur le thème actuel de votre blog, puis modifier le lien dans le code vers l'emplacement de l'image. L'effet est tel qu'indiqué sur cette page.
Code d'effet deux :
<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 ShowQuatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript=new showQuatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript();
array.push(ShowQuatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript);
}
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 showQuatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript(){
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>
Cet effet est démontré comme suit (c'est moche, déconseillé) :
Code d'effet trois
En fait, vous pouvez également utiliser le plug-in let it Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript pour implémenter des flocons de neige qui tombent sur votre blog WordPress.
Je n'entrerai pas dans les détails sur la façon d'utiliser le plug-in let it Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript ici. Ce n'est pas différent des autres installations de plug-in. Vous pouvez directement télécharger et télécharger les fichiers du dossier let it Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript vers le. /wp-content/plugins/, puis pour activer ce plug-in, définissez simplement le plug-in dans le menu du panneau d'administration de WordPress. Ou vous pouvez le trouver en recherchant directement dans la bibliothèque de plug-ins arrière.
Site officiel de Let It Snow : Cliquez pour visiter
Code d'effet quatre
J'ai vu un plug-in SnowStorm très puissant sur Internet. C'est génial. Il semble que la recherche de let it Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript sur Google produira le code pour les effets de neige et de gel. C'est très créatif. Si vous pensez que les chaussures pour enfants sont bonnes, vous pouvez vous rendre sur le site officiel pour les consulter.
J'ai trouvé un simple code d'effet de chute de flocon de neige aléatoire sur Internet à partager avec vous (cet effet est écrit en code pur. Les flocons de neige sont *.) :
Expliquons brièvement certaines des fonctions à l'intérieur :
1. letItSnow()
Il neige (cette phrase est encore inutile). Appelez ensuite createSnow pour générer des flocons de neige.
2. créerNeige()
Générer des flocons de neige. Chaque flocon de neige est une balise , mettez-y un "*" pour simuler des flocons de neige (la copie de Google ne peut pas être téléchargée, elle s'affiche en fait sous forme d'espace, je suis tellement surpris... ), puis placez-le dans un grand conteneur appelé Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox, et les individus générés sont poussés dans iArray et collectés. Le flocon de neige utilise la méthode de positionnement absolu basée sur la Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox. Le haut est de 0 px et celui de gauche utilise Math.random()*window.screen.width, de sorte que le flocon de neige soit généré de manière aléatoire dans la largeur de l'écran.
Utilisez la couleur pour contrôler la profondeur de couleur des flocons de neige afin de créer une profondeur de champ, allant de 0 à 200
Utilisez fontSize pour contrôler la taille des flocons de neige, allant de 10px à 15px
Utilisez le temps pour contrôler l'intervalle d'appel de Snowflake Falling, allant de 40 ms à 50 ms
Utilisez Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptInterval pour contrôler l'intervalle entre les flocons de neige, allant de 500 ms à 1 000 ms
Ensuite, il s'appelle de manière récursive, générant continuellement des flocons de neige.
3. chuteDown()
Comme son nom l'indique, il s'agit de faire tomber des flocons de neige. La vitesse de chute est de 2px, c'est-à-dire qu'à chaque fois il tombe verticalement de 2px. Faites un test à ce moment-là. Si le flocon de neige tombe à une hauteur fixe, c'est-à-dire plus haut que le conteneur parent, supprimez-le. Cela peut réduire la pression sur le navigateur. Sinon, un nombre trop élevé de flocons de neige entraînera un déplacement plus lent du navigateur. et plus lentement. Quoi qu'il en soit, il a été retiré de la vue par débordement : caché est hors de vue. Appelez ensuite une fonction windBlow en descendant verticalement pour faire tomber les flocons de neige de manière plus artistique.
4. ventBlow()
Le nom semble ressembler au vent qui souffle, mais c'est en fait l'effet du vent qui souffle (c'est encore plus inutile. Haha.), en utilisant un Math.sin() pour produire l'effet de flocons de neige flottant dans l'air, afin que les flocons de neige ne soient pas des lignes droites monotones. Au lieu de tomber, ils tombent en forme de serpentin. Contrôlez l'intervalle de chute afin que la continuité soit meilleure et qu'elle paraisse plus confortable.
function letItSnow(){
var Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox=document.getElementById("Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox");
var iArray=new Array();
createSnow(Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox,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 Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox=document.getElementById("Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox");
Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox.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(Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox,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);
Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox.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 Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptInterval=0;
while(Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptInterval<500){
Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptInterval=parseInt(Math.random()*1000);
}
var createTimer=setTimeout(function(){
createSnow(Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptBox,iArray);
clearTimeout(createTimer);
},Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascriptInterval);
}
Adresse de démonstration : http://demo.jb51.net/js/2014/Quatre façons dutiliser le code js et les plug-ins pour obtenir leffet de chute de flocon de neige dans les compétences wordpress_javascript/
D'accord, cela met fin aux quatre codes d'effet. J'espère que cela pourra aider des amis dans le besoin. Si vous avez des questions, vous pouvez laisser un message ci-dessous.
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript