Depois de ler os exemplos da imagem flutuando nos exemplos de efeitos especiais da página JavaScript, acho que vale a pena aprender.
Mude a imagem para uma imagem de floco de neve para completar o efeito de uma queda de floco de neve.
Além disso, alguns dos conteúdos estão relativamente desatualizados, então vamos alterá -los para os estudiosos.
incluir:
1. As operações na esquerda e no topo suportam apenas o navegador do IE. Isso está ok. Deve apoiar o Chrome.
2. Para controlar o paradeiro da imagem, você também precisa procurar elemento. Caso contrário, altere -o para matar manutenção e operar diretamente os objetos mantidos na matriz, que não serão mais rápidos.
3. A adição de elementos ao documento muda diretamente na criação de objetos de elemento através do código JS.
Ideias de implementação:
1. Inicialize e gerar 10 divs, todos absolutamente posicionados. Coloque uma imagem de floco de neve em cada div, defina a largura e a altura e salve -a em uma matriz, para que as funções que a neve mais tarde possam operar diretamente.
2. Inicialize as coordenadas horizontais e verticais de cada div e sempre dê ao floco de neve uma posição inicial para a queda.
3. Inicialize cada floco de neve com uma etapa de queda vertical e uma etapa de balanço horizontal, para que cada floco de neve caia e balance a uma velocidade diferente.
4. Faça uma função de neve, ajuste a função a cada 10 segundos. Cada vez, ele controla a função para controlar o comprimento de cada floco de neve que cai na vertical e calcula um valor seno -seno através da função senoidal e multiplique -a pela amplitude. Dessa forma, os flocos de neve caem na forma de uma forma de onda senoidal.
Você pode encontrar fotos online.
O código a seguir é compatível com o IE8+ e o Chrome.
A cópia do código é a seguinte:
<Body>
<Script Language = "JavaScript">
// No processo da imagem, a trajetória da coordenada horizontal é uma curva sinusoidal centrada em um ponto.
// A função de animação é concluída usando a função Settimeout
//foto
var snowsrc = "Snowflake.png"
// O número de flocos de neve
var no = 10;
// Declare variáveis, XP representa coordenadas horizontais, YP representa coordenadas verticais>
var dx, xp, yp;
// Declare variáveis, AM representa a amplitude das balanços esquerda e direita, o STX representa a etapa de deslocamento da coordenada horizontal, o STYS representa a etapa da coordenada vertical>
Var AM, Stx, STY;
{
// Obtenha a largura da janela atual
clientWidth = document.body.clientWidth;
// Obtenha a altura da janela atual
clientHeight = document.body.clientHeight;
}
var dx = new Array ();
var xp = new Array ();
var yp = new Array ();
var am = new Array ();
var stx = new Array ();
var sty = new Array ();
varflakes var = new Array ();
para (i = 0; i <não; ++ i) {
dx [i] = 0;
// O valor inicial da coordenada horizontal da i -th
xp [i] = math.random ()*(clientwidth-50);
yp [i] = math.random ()*clientHeight; // o valor original da coordenada vertical da i-és
sou [i] = math.random ()*20; // A amplitude das balanços esquerda e direita da i -th
stx [i] = 0,02 + math.random ()/10; // o comprimento da etapa da direção x da i -th
sty [i] = 0,7 + math.random (); // O comprimento da etapa da I -th Picture y Direction
// Gere uma div que segura a imagem do floco de neve e define suas coordenadas absolutas
var snowflaidiv = document.createElement ('div');
Snowflakediv.SetAttribute ('ID', 'Dot'+ i);
Snowflakediv.style.Position = 'Absolute';
Snowflakediv.style.top = 15;
Snowflakediv.style.left = 15;
// Gere um objeto de imagem de floco de neve, defina a largura e a altura e adicione div
var snowflakeimg = document.createElement ('img');
Snowflakeimg.setAttribute ('SRC', Snowsrc);
snowflakeimg.style.width = 30;
Snowflakeimg.style.Height = 30;
// Adicione a divflake de neve no documento e salve -o através da matriz
Snowflakediv.AppendChild (Snowflakeimg);
document.body.appendChild (Snowflakediv);
flocos de neve [i] = neve;
}
function snow () {
para (i = 0; i <não; ++ i) {
// A coordenada vertical mais o comprimento da etapa da i -th
yp [i] += sty [i];
// Se a nova coordenada exceder a borda inferior da tela, redefine as informações da imagem, incluindo a coordenada horizontal, a coordenada vertical e o tamanho da etapa na direção x e o tamanho da etapa na direção y
if (yp [i]> clientHeight-50) {
// reatribua as coordenadas horizontais da imagem
xp [i] = math.random ()*(clientwidth-am [i] -30);
// reatribua as coordenadas verticais da imagem
yp [i] = 0;
}
dx [i] += stx [i]; // Adicione uma etapa
// manipula diretamente o divisor de floco de neve correspondente na matriz
varvina de neve = flocos de neve [i];
// Atualize as coordenadas verticais da imagem
neveflakediv.style.top = yp [i];
// Atualize o eixo horizontal da imagem
Snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// Defina o período de tempo para atualização de animação
setTimeout ("Snow ()", 10);
}
// chamando a função Snowie ()
neve();
</script>
</Body>
O exposto acima é todo o código e o efeito é muito bom. Para a explicação específica, consulte os comentários. Não vou falar muito bobagem aqui. Espero que seja útil para todos.