Utilisez Javascript pour obtenir l'effet de la chute des flocons de neige_javascript skills

Après avoir lu l'exemple de l'effet des images flottantes dans la collection d'exemples d'effets spéciaux Web JavaScript, je pense que cela vaut la peine d'être appris.

Changez l'image en image de flocon de neige pour obtenir l'effet de chute de flocons de neige.

De plus, une partie du contenu est relativement obsolète, alors modifions-le.

Comprend :

1. Les opérations à gauche et en haut ne prennent en charge que le navigateur IE. Pour que cela fonctionne, Chrome doit être pris en charge.
2. Le processus de contrôle de la localisation de l'image nécessite de récupérer l'élément. Sinon, remplacez-le par un stockage dans un tableau et exploitez directement les objets stockés dans le tableau. Il ne démarrera pas plus rapidement.
3. Ajoutez des éléments au document directement en créant des objets éléments via le code JS.

Idées de mise en œuvre :

1. Initialisez et générez 10 div, qui utilisent tous un positionnement absolu. Mettez une image de flocon de neige dans chaque div, définissez la largeur et la hauteur et enregistrez-la dans un tableau, afin que la fonction de neige suivante puisse être directement utilisée.
2. Initialisez l'abscisse et l'ordonnée de chaque div. Donnez toujours aux flocons de neige une position de départ pour tomber.
3. Initialisez chaque flocon de neige pour avoir une marche de chute verticale et une marche de balancement horizontal, de sorte que chaque flocon de neige tombe et se balance à des vitesses différentes.
4. Créez une fonction neige et ajustez la fonction toutes les 10 secondes. Chaque fois que vous ajustez la fonction, elle contrôle chaque flocon de neige pour qu'il tombe verticalement selon sa propre longueur de pas. L'oscillation horizontale est calculée par une valeur sinusoïdale à l'aide de la fonction sinusoïdale, puis multipliée. par amplitude, de sorte que les flocons de neige tombent selon une forme d'onde sinusoïdale.

Vous pouvez trouver des photos en ligne.

Le code suivant est compatible avec IE8 et Chrome.

Copier le code Le code est le suivant :

Ce qui précède est tout le code, l'effet est assez bon, veuillez consulter les commentaires pour une explication spécifique, il n'y aura plus de bêtises ici, j'espère que cela pourra être utile à tout le monde.