L'hiver est là, et de nombreux espaces de blog ont ajouté des flocons de neige, alors je suis allé voir leur effet. Il y a plusieurs codes d'effet, alors je les ai repris. Les amis dans le besoin peuvent les reprendre et les essayer.
GRANDES PHOTOS DE FLAKE SNOWS:
Code d'effet 1
<script type = "text / javascript" linguistique = "javascript"> (function () {function k (a, b, c) {if (a.addeventListener) a.addeventListener (b, c, false); else a.attachevent && a.attachevent ("+ b, c)} function g (a) {if (type windows. {var b = window.onload; window.onload = function () {b (); a ()}}} function h () {var a = {}; for (tap dans {top: "", left: ""}) {var b = type == "top"? "Undefined") a [type.tolowercase ()] = fenêtre ["page" + b + "offset"]; else {b = document.DocumentElement.ClientHeight? window.innerheight; else if (a.parerentement.clientheight) b = a.parerentelement.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.s.sthyle = math.random () * 5 + 5; this.e.steryle. 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; 1; this.angle = 1,4 + 0,2 * math.random (); this.minangle = 1,4; this.maxangle = 1.6; this.anglelta = 0.01 * math.random (); this.speed = 2 + math.random ()} var j = false; g (function () {j = true}); var f = true; {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]. 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 () {creatsnow (a, b)})}; window.reMovesNow = function () {f = false}; i.prototype = {createel: function (a, b) {this.el = document.createelement ("img"); this.el.settribute ("src", b + "Adresse de liaison absolue de l'image de neige"); "Absolute"; this.el.style.display = "block"; this.el.style.zindex = "99999"; this.parent.appendChild (this.el)}, move: function () {if (this.ang <this.minangle || this.angle> this.maxang this.angleltelta; 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 () {this.el.style.top = math.round (this.top) + "px"; this.el.style.left = math.round (this.left) + "px"}, retire: function () {this.parent.removechild (this.el); this.parent = this.el = null}}})) (); CreateSnow ("".Copiez et collez le code ci-dessus directement dans l'en-tête ou le fichier de pied de page dans le sujet. Si vous souhaitez que la page de l'article s'affiche, ajoutez-la directement au single. Ci-dessous, nous vous fournirons l'image du flocon de neige (matériel requis). Petite image: vous devez le télécharger sur le sujet actuel de votre blog, puis modifier le lien dans le code à l'emplacement de l'image. L'effet est comme indiqué sur cette page.
Code d'effet 2:
<html> <éad- head> <script> function start () {var array = new Array (); var canvas = document.getElementById ("myCanvas"); var context = canvas.getContex showsNow (); array.push (showsNow);} time = setInterval (function () {context.clearrect (0,0, canvas.width, canvas.height); for (var i = 0; i <array.length; i ++) {array [i] .move (); showsNow () {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> <entrée =" Button "value =" start "onclick =" start () "/> <br/> <canevas id =" mycanvas "style" bleu "> </ canvas> </ body> </html>Cet effet est démontré comme suit (il semble moche, pas recommandé):
Code d'effet trois
En fait, si vous implémentez le blog WordPress, vous pouvez également utiliser le plug-in de Snow Let It.
Je ne parlerai pas de la façon d'utiliser le plug-in Let It Snow ici. Ce n'est pas différent des autres installations de plug-ins. Vous pouvez télécharger et télécharger directement les fichiers dans le dossier, laissez-le neige vers le répertoire / wp-content / plugins / répertoire, puis activer ce plug-in et définir le plug-in dans le menu du panneau de gestion WordPress. Ou recherchez directement dans la bibliothèque du plug-in à l'arrière, vous pouvez également le trouver.
Laissez-le Songe Site officiel: cliquez pour visiter
Code d'effet quatre
J'ai vu un plugin de tempête de neige très puissant en ligne. C'est tellement génial, il semble que le code pour la recherche de la neige de la neige sur Google aura des effets de neige et de gel, ce qui est très créatif. Si vous pensez avoir de bonnes chaussures pour enfants, vous pouvez vous rendre par vous-même sur le site officiel.
J'ai trouvé un code de chute de flocons de neige aléatoire simple en ligne à partager avec vous (cet effet est écrit en code pur. Les flocons de neige sont *.):
Quelques fonctions sont expliquées brièvement:
1. LetitsNow ()
Il neige (cette phrase est toujours inutile). Ensuite, la création est appelée pour générer des flocons de neige.
2. CréertNow ()
Chaque flocon de neige est une balise <i>, et un "*" est placé à l'intérieur pour simuler les flocons de neige (la copie de Google ne peut pas être téléchargée, elle le montre en fait comme un espace, j'ai fait un soleil ...), puis je l'ai mis dans un grand conteneur appelé Snowbox, et les individus générés sont poussés dans Iarray pour le récupérer. Les flocons de neige utilisent la méthode de positionnement absolu avec Snowbox comme référence. Le haut est de 0px, et gauche utilise math.random () * window.screen.width pour permettre à la génération de flocons de neige au hasard dans la largeur de l'écran.
Utilisez la couleur pour contrôler la profondeur de la couleur des flocons de neige pour générer une profondeur de champ, allant de 0 à 200
Utilisez FontSize pour contrôler la taille des flocons de neige, allant de 10px à 15px
Utilisez du temps pour contrôler l'intervalle d'appel des flocons de neige qui tombent, allant de 40 ms à 50 ms
Utilisez SnowInterval pour contrôler l'intervalle de la génération de flocon de neige, allant de 500 ms à 1000 ms
Ensuite, l'appel récursif lui-même est appelé et les flocons de neige sont constamment générés.
3. Falldown ()
Comme son nom l'indique, cela signifie que les flocons de neige tombent, avec une vitesse de 2px, ce qui signifie que chaque goutte verticale est de 2px. Pour le moment, faites un test. Si les flocons de neige tombent à une hauteur fixe, ce qui est plus élevé que le récipient parent, retirez-le. Cela peut réduire la pression sur le navigateur. Sinon, trop de flocons de neige entraîneront le navigateur plus lent et plus lent. Quoi qu'il en soit, il a été débordé: caché et ne peut pas le voir, et c'est propre si vous ne le voyez pas. Ensuite, appelez une fonction de soufflerie en descendant verticalement pour rendre les flocons de neige plus artistiques.
4. Windblow ()
Un nom semble souffler le vent, mais c'est en fait l'effet du vent (c'est encore plus inutile. Haha.). Utilisez un math.sin () pour produire l'effet des flocons de neige flottant dans l'air, afin que les flocons de neige ne tombent pas de manière monotone, mais tombent en forme de serpent, contrôlent l'intervalle de la chute, afin que la continuité soit meilleure et qu'elle semble plus confortable.
fonction letitsNow () {var snowbox = document.getElementById ("snowbox"); var iarray = new Array (); CreateSnow (snowbox, iarray);} Fonction Falldown (temObj, iarray) {var Speed = 2; var top = Parseint (quand il atteint la hauteur); La pression du navigateur pour (var i = 0; i <iarray.length; i ++) {if (temObj == iarray [i]) {iarray.splice (i, 1); var neigebox = document.getElementyid ("snowbox"); snowbox.removechild (temObj); returnByid ("Snowbox"); Snowbox.RemoveChild (temObj); returnByid (Snowbox "); false;}}} temobj.style.top = top + vitesse + "px"; var wind = windblow (temobj, top); temobj.style.left = parseInt (temobj.style.left) + wind * 2 + "px";} fonction windblow (temobj, top) {if (parseint (math.random ())% 2 ==) Math.sin (top / 16); else return math.cos (top / 16);} function CreateSnow (snowbox, 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 = paSeInt (math.random () * 200); temobj.style.color = "#" + temnum.tostring (16) + temnum.tostring (16) + temnum.tostring (16) + temnum.tostring (16); iarRay.push (temobj); Snowbox.AppendChild (Temobj); Temnum = 0; while (temnum <10) {temnum = paSeInt (math.random () * 15);} temObj.style.fontsize = temnum + "px"; var time = 0; while (time <40) {time = paSeInt (math.random () * 50);} temObj.timer = setInterval (function () {Falldown (temobj, iarray);}, time); var newnowinterval = 0; while (neigeInterval <500) {SnowInterval = ParseInt CreateTimer = setTimeout (function () {CreateSnow (Snowbox, iarray); ClearTimeout (CreateTimer);}, neigeInterval);}Adresse de démonstration: http://demo.vevb.com/js/2014/snow/
Ok, les quatre codes d'effet se terminent ici. J'espère que cela peut aider les amis dans le besoin. Si vous avez des questions, veuillez laisser un message ci-dessous.