principio:
1. JS crea dinámicamente DIV, especificando la clase de clase para establecer diferentes estilos de imagen de fondo para mostrar diferentes efectos de copo de nieve.
2. JS obtiene el DIV creado y cambia su valor de atributo superior. Cuando la altura de caída es mayor que la altura de la pantalla, se eliminará el DIV móvil.
3. No rocíe si parece estar incompleto
Código HTML:
<! DocType html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> copas de nieve volando </title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/move.js"> </script> </shed <body> <body> </div> </body> </html>
Código CSS
*{margen: 0; relleno: 0; Estilo de lista: Ninguno; borde: ninguno;} cuerpo {ancho: 100%; Altura: 600px; Antecedentes:#000;}. Snow_parent {posición: relativo; Ancho: 100%; Altura: 100%; desbordamiento: oculto; Margen: 0 Auto;}. Snow_Parent Div.Parent {Background-Image: url (../ img/snow.png); flotante: izquierda; -Webkit-transform: escala (.1); -Moz-Transform: escala (.1); -o-transform: escala (.1); -ms-transform: escala (.1); transformar: escala (.1); posición: absoluto;}. snow_one {ancho: 180px; Altura: 180px; Posición de fondo: 0 0; Background-Repeat: sin repetición; Izquierda: -70px; superior: -95px;}. Snow_two {ancho: 140px; Altura: 140px; Posición de fondo: -220px -18px; Izquierda: -30px; superior: -75px;}. Snow_three {ancho: 150px; Altura: 150px; Posición de fondo: -400px -15px; Izquierda: -20px; superior: -80px;}. Snow_four {ancho: 160px; Altura: 160px; Posición de fondo: -10px -206px; } .snow_four {izquierda: -10px; arriba: -85px;}Código JS:
/* Creatby Jiucheng 2016-4-24*/ window.onload = function () {init ();} // crea divfunction createDiv () {// Crear div y agregar al elemento principal var snowdiv = document.createElement ("div"); document.getElementById ("JS_SONW"). AppendChild (SnowDiv); // Haga la clase que crea Div al azar y muestra diferentes copos de nieve var Whatname = ["Snow_one Parent", "Snow_Two Parent", "Snow_three Parent", "Snow_Four Parent"]; Var index = Math.Floor (Math.random ()*Whatname.length); snowdiv.classname = whatname [index]; // Obtenga el valor del atributo izquierdo del DIV (aleatorio) y asigna al Div Var creado whatleft = getLeft ()+'Px'; snowdiv.style.left = whatleft; return snowDiv;} // Obtenga la función de valor de atributo izquierdo aleatorio getleft () {// Obtenga el valor máximo de atributo izquierdo del DIV, es decir, el ancho del elemento principal var elparent = document.getElementById ("js_sonw"); // Obtenga todos los estilos del elemento principal var VAR style = window.getComputedStyle (ELEPARENT); // La izquierda en CSS es un número negativo aquí debe restarse aquí var maxwidth = parseInt (style.width) +70; // deja que la izquierda del div creado sea un valor aleatorio var randomLeft = math.floor (math.random ()*maxwidth); return randomLeft;} // Let It Movewn () {// Obtener el objeto en movimiento var mudeLem = createDiv (); // Obtenga todos los valores de atributo de estilo del objeto en movimiento var elestyle = window.getComputedStyle (MoveLem); // Obtenga todos los valores de atributo de estilo del objeto en movimiento var elestyle = window.getComputedStyle (MoveLem); // Obtenga su valor de atributo superior var eletop = parseInt (elestyle.top); // Establezca el temporizador para cambiar dinámicamente el valor de atributo superior del objeto móvil var t = setInterval (function () {eletop ++; // Pague el nuevo valor superior al objeto en movimiento Moveelem.style.top = eletop+"px"; // Cuando cae a la altura de la altura del temporizador, detente el temporizador y delete el objeto móvil del elemento matriz if (eletop> = ventana de la ventana. ClearInterval (t); // La velocidad de caída no tiene 10 milisegundos para caer 1px} function init () {// get y establece dinámicamente la altura del cuerpo document.body.style.height = window.innerheight+"px"; // Crear un objeto móvil cada 500 milisegundos y ejecutar la función de movimiento var t = setInterval (function () {Moved ();}, 100);}El artículo anterior JavaScript logra el efecto de nieve [código de ejemplo] es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.