Después de leer los ejemplos de la imagen flotando en la página web de JavaScript ejemplos de efectos especiales, creo que vale la pena aprender.
Cambie la imagen a una imagen de copo de nieve para completar el efecto de un copo de nieve que cae.
Además, algunos de los contenidos están relativamente desactualizados, así que cambiemos los académicos.
incluir:
1. Las operaciones en el navegador de IE solo admiten la izquierda y superior. Esto está bien. Debe apoyar a Chrome.
2. Para controlar el paradero de la imagen, también debe buscar elemento. Si no, entonces cámbielo al mantenimiento de la matriz y opere directamente los objetos mantenidos en la matriz, que no será más rápido.
3. Agregar elementos al documento cambia directamente a la creación de objetos de elementos a través del código JS.
Ideas de implementación:
1. Inicializar y generar 10 divs, todos los cuales están absolutamente posicionados. Coloque una imagen de copo de nieve en cada div, coloque el ancho y la altura, y guárdela en una matriz, de modo que las funciones que nieve luego pueda operar directamente.
2. Inicialice las coordenadas horizontales y verticales de cada DIV, y siempre le dé al copo de nieve una posición inicial para la caída.
3. Inicialice cada copo de nieve con un paso de caída vertical y un paso de giro horizontal, de modo que cada copo de nieve caiga y se balancee a una velocidad diferente.
4. Haz una función de nieve, ajuste la función cada 10 segundos. Cada vez, controla la función para controlar la longitud de cada copo de nieve que cae verticalmente. El swing horizontal se calcula por función sinusoidal y se multiplica por la amplitud. De esta manera, los copos de nieve caen según la forma de onda sinusoidal.
Puedes encontrar fotos en línea.
El siguiente código es compatible con IE8+ y Chrome.
La copia del código es la siguiente:
<Body>
<Script language = "javaScript">
// En el proceso de la imagen, la trayectoria de la coordenada horizontal es una curva sinusoidal centrada en un punto.
// La función de animación se completa utilizando la función SetTimeOut
//imagen
var snowsrc = "Snowflake.png"
// el número de copos de nieve
var no = 10;
// Declarar variables, XP representa coordenadas horizontales, YP representa coordenadas verticales>
var dx, xp, yp;
// Declarar variables, AM representa la amplitud de columpios izquierdo y derecho, STX representa el paso de desplazamiento de la coordenada horizontal, Sty representa el paso de la coordenada vertical>
var am, stx, sty;
{
// Obtener el ancho de la ventana actual
ClientWidth = document.body.clientWidth;
// Obtener la altura de la ventana actual
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 ();
Var Snowflakes = New Array ();
para (i = 0; i <no; ++ i) {
dx [i] = 0;
// El valor inicial de la coordenada horizontal de la imagen i-th
xp [i] = Math.random ()*(ClientWidth-50);
yp [i] = math.random ()*clientHeight; // El valor original de la coordenada vertical de la imagen i-th
am [i] = math.random ()*20; // La amplitud de los cambios izquierdo y derecho de la imagen i-th
stx [i] = 0.02 + math.random ()/10; // La longitud del paso de la dirección x de la imagen i-th
sty [i] = 0.7 + math.random (); // La longitud del paso de la dirección en la imagen Y
// Generar un div que contiene la imagen del copo de nieve y establecer sus coordenadas absolutas
var snowflakediv = document.createElement ('div');
snowflakediv.setAttribute ('id', 'dot'+ i);
snowflakediv.style.position = 'Absolute';
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
// Generar un objeto de imagen de copo de nieve, establecer el ancho y la altura, y agregar div Div
var snowflakeImg = document.createElement ('img');
SnowflakeImg.SetAttribute ('src', snowsrc);
Snowflakeimg.style.Width = 30;
Snowflakeimg.Style.Height = 30;
// Agregue el Div Snowflake Div al documento y guárdelo a través de la matriz
Snowflakediv.appendChild (Snowflakeimg);
document.body.appendChild (Snowflakediv);
copos de nieve [i] = snowflakediv;
}
function snow () {
para (i = 0; i <no; ++ i) {
// La coordenada vertical más la longitud del paso de la imagen i-th
yp [i] += sty [i];
// Si la nueva coordenada excede el borde inferior de la pantalla, restablezca la información de la imagen, incluida la coordenada horizontal, la coordenada vertical y el tamaño del paso en la dirección X y el tamaño del paso en la dirección Y
if (yp [i]> clientHeight-50) {
// Reasignar las coordenadas horizontales de la imagen
xp [i] = math.random ()*(clientwidth-am [i] -30);
// Reasignar las coordenadas verticales de la imagen
yp [i] = 0;
}
dx [i] += stx [i]; // Agregar un paso
// Manipula directamente el Div correspondiente copo de nieve en la matriz
var snowflakediv = copos de nieve [i];
// Actualizar las coordenadas verticales de la imagen
snowflakediv.style.top = yp [i];
// Actualizar el eje horizontal de la imagen
snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// establece el período de tiempo para la actualización de la animación
setTimeout ("Snow ()", 10);
}
// llamando a la función Snowie ()
nieve();
</script>
</body>
Lo anterior es todo el código, y el efecto es bastante bueno. Para la explicación específica, consulte los comentarios. No hablaré muchas tonterías aquí. Espero que sea útil para todos.