El invierno está aquí, y muchos espacios de blog han agregado copos de nieve, así que fui a ver su efecto. Hay varios códigos de efecto, así que los tomé. Los amigos necesitados pueden llevarlos y probarlos.
Grandes fotos de copos de nieve:
Código de efecto 1
<script type = "text/javaScript" lenguaje = "javascript"> (function () {function k (a, b, c) {if (a.adDeventListener) a.adDeventListener (b, c, falso); else a.attachevent && a.attachevent ("en" + b, c)} function g (a) {if (typeof window.onload! {var b = window.onload; window.onload = function () {b (); a ()}}} function h () {var a = {}; for (type in {top: "", izquierda: ""}) {var b = type == "top"? "Undefined") a [type.tolowerCase ()] = window ["página" + b + "offset"]; else {b = document.documentelement.clientHeight? = 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.offsetwetwidth - 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}; true; window.createSnow = function (a, b) {if (j) {var c = [], m = setInterval (function () {f && b> c.length && math.random () <b * 0.0025 && c.push (nuevo 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 (ventana, "scroll", function () {for (var e = c.length-1; e> = 0; e--) c [e] .draw ()})} el más g (function () {creesnow (a, a, b)})}; window.removesnow = function () {f = false}; i.prototype = {createEl: function (a, b) {this.el = document.createElement ("img"); this.el.setAttribute ("src", b + "dirección de enlace absoluto de la imagen de Snowflake"); this.style.position = "Absoluto"; this.el.style.display = "bloque"; this.el.style.zindex = "999999"; this.parent.appendChild (this.el)}, mover: function () {if (this.angle <this.minangle || this.angle> this.maxangle) this.angledelta = -this.angledEltArtA; 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}, dibujar: dibuje: {this.el.style.top = math.round (this.top) + "px"; this.el.style.left = math.round (this.left) + "px"}, remoCopie y pegue el código anterior directamente en el encabezado o archivo de pie de página en el tema. Si solo desea que se muestre la página del artículo, agréguela directamente al single. A continuación, le proporcionaremos la imagen del copo de nieve (material requerido). Pequeña imagen: debe subirlo al tema actual de su blog y luego cambiar el enlace en el código a la ubicación de la imagen. El efecto es como se muestra en esta página.
Código de efecto 2:
<html> <ad <head> <scryp> function start () {var array = new array (); var canvas = document.getElementById ("mycanvas"); var context = canvas.getContext ("2d"); for (var i = 0; i <50; i ++) {var showsnow = neownow showsnow (); array.push (showsnow);} time = setInterval (function () {context.clearrect (0,0, canvas.width, canvas.height); for (var i = 0; i <array.length; i ++) {matriz [i] .move (); array [i] .draw (context);}}, 500);};} shoSnow () {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 =" inicio "en el ciclismo Azul "> </Canvas> </body> </html>Este efecto se demuestra de la siguiente manera (se siente feo, no recomendado):
Código de efecto tres
De hecho, si implementa el blog de WordPress, también puede usar el complemento Let It Snow.
No hablaré sobre cómo usar Let It Snow Plug-in aquí. No es diferente de otras instalaciones de complementos. Puede descargar y cargar directamente los archivos en la carpeta deja que nieve en el/WP-Content/Plugins/Directory, y luego activar este complemento y configure el complemento en el menú del panel de administración de WordPress. O busque directamente en la biblioteca de complemento en la parte posterior, también puede encontrarla.
Sitio web oficial de Let It Snow: haga clic para visitar
Código de efecto cuatro
He visto un complemento de tormenta de nieve muy poderoso en línea. Es increíble que parece que el código para buscar la nieve de Let It en Google tendrá efectos de nieve y heladas, lo cual es muy creativo. Si cree que tiene buenos zapatos para niños, puede ir al sitio web oficial por sí mismo.
Encontré un código de efecto de caída de copo de nieve aleatorio simple en línea para compartir con usted (este efecto está escrito en código puro. Los copos de nieve son *.)::
Algunas funciones se explican brevemente:
1. Letitsnow ()
Está nevando (esta oración sigue siendo inútil). Luego se llama a CreateSnow para generar copos de nieve.
2. CreateSnow ()
Cada copo de nieve es una etiqueta <i>, y se coloca un "*" adentro para simular los copos de nieve (la copia de Google no se puede descargar, en realidad lo muestra como un espacio, hice un sol ...), y luego lo pongo en un contenedor grande llamado Snowbox, y los individuos generados son empujados a Iarray para recolectarlo. Los copos de nieve utilizan el método de posicionamiento absoluto con la casilla de snow como referencia. La parte superior es 0px, y la izquierda usa math.random ()*window.screen.width para permitir que los copos de nieve se generen al azar en el ancho de la pantalla.
Use el color para controlar la profundidad de color de los copos de nieve para generar profundidad de campo, que va de 0 a 200
Use FontSize para controlar el tamaño de los copos de nieve, que van desde 10px a 15px
Use el tiempo para controlar el intervalo de llamada de los copos de nieve que caen, que van desde 40 ms a 50 ms
Use el intervalo de nieve para controlar el intervalo de la generación de copos de nieve, que varía de 500 ms a 1000 ms
Luego se llama la llamada recursiva en sí, y los copos de nieve se generan constantemente.
3. Falldown ()
Como su nombre indica, significa que caen los copos de nieve, con una velocidad de 2px, lo que significa que cada caída vertical es 2px. En este momento, haga una prueba. Si los copos de nieve caen a una altura fija, que es más alta que el recipiente principal, retírelo. Esto puede reducir la presión sobre el navegador. De lo contrario, demasiados copos de nieve harán que el navegador se vaya más lento y más lento. De todos modos, ha sido desbordado: oculto y no puede verlo, y está limpio si no lo ve. Luego llame a una función de bloqueo de viento mientras desciende verticalmente para hacer que los copos de nieve sean más artísticos.
4. Windblow ()
Un nombre parece estar soplando el viento, pero en realidad es el efecto del soplado del viento (esto es aún más inútil. Jaja). Use un matemático.
function letItSnow(){var snowBox=document.getElementById("snowBox");var iArray=new Array();createSnow(snowBox,iArray);}function fallDown(temObj,iArray){var speed=2;var top=parseInt(temObj.style.top);if(top>510){//When it reaches the height, delete it to relieve the browser Presión para (var i = 0; i <iarray.length; i ++) {if (temoBj == iarray [i]) {iarray.splice (i, 1); var snowbox = document.getElementByid ("snowbox"); snowbox.removechild (Temobj); regreso falso;}}} Temobj.style.top = top+speed+selte 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 (superior/16); else regresa Math.cos (top/16);} 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 = parseInt (Math.random ()*200); temobj.style.color = "#"+Temnum.ToString (16)+Temnum.ToString (16)+Temnum.ToString (16)+Temnum.ToString (16); iarray.push (Temobj); Snowbox.appendchild ( Temnum = 0; while (temnum <10) {temnum = parseInt (math.random ()*15);} temobj.style.fontsize = temnum+"px"; var tiempo = 0; while (time <40) {time = parseInt (math.random ()*50);} temobj.timer = setInterval (function () {falldown (temoBj, iarray);}, tiempo); var snowinterval createTimer = setTimeOut (function () {CreateSnow (Snowbox, iarray); ClearTimeOut (CreateTimer);}, SnowInterval);}Dirección de demostración: http://demo.vevb.com/js/2014/snow/
Ok, los cuatro códigos de efecto terminan aquí. Espero que pueda ayudar a los amigos necesitados. Si tiene alguna pregunta, deje un mensaje a continuación.