princípio:
1. JS cria dinamicamente o div, especificando a classe de classe para definir diferentes estilos de imagem de fundo para exibir diferentes efeitos do floco de neve.
2. O JS recebe a div e altera seu valor de atributo principal. Quando a altura de queda é maior que a altura da tela, a div mobile será excluída.
3. Não pulverize se parecer incompleto
Código HTML:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> flocos de neve voando </title> <link rel = "Stylesheet" href = "css/index.css"> <script src = "js/move.js"> </div> </body> </html>
Código CSS
*{margem: 0; preenchimento: 0; estilo de lista: nenhum; fronteira: nenhuma;} corpo {largura: 100%; Altura: 600px; Antecedentes:#000;}. Snow_parent {Position: relativo; largura: 100%; Altura: 100%; estouro: oculto; margem: 0 auto;}. snow_parent div.parent {background-image: url (../ img/snow.png); flutuar: esquerda; -Webkit-transform: escala (.1); -moz-transform: escala (.1); -O-transform: escala (.1); -ms-transform: escala (.1); transformação: escala (.1); Posição: Absolute;}. Snow_One {Width: 180px; Altura: 180px; Posição de fundo: 0 0; Repetição de fundo: sem repetição; Esquerda: -70px; topo: -95px;}. Snow_two {largura: 140px; Altura: 140px; Posição de fundo: -220px -18px; Esquerda: -30px; topo: -75px;}. Snow_three {largura: 150px; Altura: 150px; Posição de fundo: -400px -15px; Esquerda: -20px; topo: -80px;}. Snow_four {largura: 160px; Altura: 160px; Posição de fundo: -10px -206px; } .snow_four {esquerda: -10px; topo: -85px;}Código JS:
/* creatby jiucheng 2016-4-24*/ window.onload = function () {init ();} // crie divfunção cremeDiv () {// crie div e anexa ao elemento pai var snowdiv = document.createElement ("div"); document.getElementById ("JS_SONW"). ApndendChild (SnowDiv); // Faça a aula que cria div e exibe diferentes flocos de neve diferentes varíssimos = ["Snow_one Parent", "Snow_two Parent", "Snow_three Parent", "Snow_four Parent"]; var index = Math.Floor (Math.random ()*WhathName.Length); Snowdiv.className = OthathName [Index]; // Obtenha o valor do atributo à esquerda do div (aleatório) e atribua -o ao div e o Div Var Whatleft = GetLeft ()+'PX'; snowdiv.style.left = whatleft; Retornar Snowdiv;} // Obtenha a função de valor de atributo à esquerda aleatória getLeft () {// obtenha o valor máximo de atributo à esquerda da div, ou seja, a largura do elemento pai var eleparent = document.getElementById ("js_sonw"); // obtém todos os estilos do elemento pai var var style = window.getComputedStyle (Eleparent); // A esquerda no CSS é um número negativo aqui deve ser subtraído aqui var maxwidth = parseint (style.width) +70; // Deixe a esquerda da div criada ser um valor aleatório var randomleft = math.floor (math.random ()*maxwidth); Retornar Randomleft;} // Deixe -o mudar () {// Obtenha o objeto em movimento var mOvelem = creatDiv (); // Obtenha todos os valores de atributo de estilo do objeto em movimento var elestyle = window.getComputedStyle (movelem); // Obtenha todos os valores de atributo de estilo do objeto em movimento var elestyle = window.getComputedStyle (movelem); // Obtenha seu valor de atributo principal var eletop = parseint (elestyle.top); // Defina o timer para alterar dinamicamente o valor de atributo superior do objeto em movimento var t = setInterval (function () {eletop ++; // Pagar o novo valor superior ao objeto em movimento movelem.style.top = eleTop+"px"; Document.getElementById ("JS_SONW"). RemoveChild (Movelem); // A velocidade de queda não tem 10 milissegundos para cair 1px} function init () {// obtenha e defina dinamicamente a altura do documento do corpo.body.style.height = window.innerHeight+"px"; // Crie um objeto em movimento a cada 500 milissegundos e execute a função de movimento var t = setInterval (function () {movicewn ();}, 100);}O artigo acima JavaScript alcança o efeito de neve [código de exemplo] é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.