Après avoir lu les exemples de l'image flottant dans la page Web JavaScript des exemples d'effet spéciaux, je pense que cela vaut la peine d'apprendre.
Changez l'image en une image de flocon de neige pour compléter l'effet d'une chute de flocon de neige.
De plus, certains contenus sont relativement dépassés, alors changeons-les par les chercheurs.
inclure:
1. Les opérations sur le navigateur à gauche et à haut ne prennent en charge que le navigateur. C'est ok. Il doit prendre en charge Chrome.
2. Pour contrôler le sort de l'image, vous devez également rechercher des éléments. Sinon, modifiez-le en maintenance du tableau et utilisez directement les objets maintenus dans le tableau, ce qui ne sera pas plus rapide.
3. L'ajout d'éléments au document change directement vers la création d'objets d'élément via le code JS.
Idées de mise en œuvre:
1. Initialiser et générer 10 divs, qui sont tous absolument positionnés. Mettez une image de flocon de neige dans chaque div, définissez la largeur et la hauteur et économisez-la dans un tableau, afin que les fonctions qui ne soient plus tard puissent fonctionner directement.
2. Initialisez les coordonnées horizontales et verticales de chaque div, et donnez toujours au flocon de neige une position de départ pour la chute.
3. Initialisez chaque flocon de neige avec une étape de chute verticale et une étape de balançoire horizontale, de sorte que chaque flocon de neige tombe et se balance à une vitesse différente.
4. Faites une fonction de neige, ajustez la fonction toutes les 10 secondes. Chaque fois, il contrôle la fonction pour contrôler la longueur de chaque flocon de neige tombant verticalement. Le swing horizontal est calculé par la fonction sinusoïdale et multiplié par l'amplitude. De cette façon, les flocons de neige tombent selon la forme d'onde sinusoïdale.
Vous pouvez trouver des photos en ligne.
Le code suivant est compatible avec IE8 + et Chrome.
La copie de code est la suivante:
<body>
<Script linguisse = "javascript">
// Dans le processus de l'image, la trajectoire de la coordonnée horizontale est une courbe sinusoïdale centrée sur un point.
// La fonction d'animation est terminée en utilisant la fonction Settimeout
//image
var snowsrc = "neigeflake.png"
// le nombre de flocons de neige
var no = 10;
// Déclarer les variables, XP représente les coordonnées horizontales, YP représente les coordonnées verticales>
var dx, xp, yp;
// Déclarer les variables, AM représente l'amplitude des oscillations gauche et droite, STX représente l'étape de décalage de la coordonnée horizontale, Sty représente l'étape de la coordonnée verticale>
var am, stx, sty;
{
// Obtenez la largeur de la fenêtre actuelle
clientwidth = document.body.clientwidth;
// Obtenez la hauteur de la fenêtre actuelle
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 style = new Array ();
Var Snowflakes = nouveau Array ();
pour (i = 0; i <non; ++ i) {
dx [i] = 0;
// la valeur initiale de la coordonnée horizontale de la i-ème image
xp [i] = math.random () * (clientwidth-50);
yp [i] = math.random () * ClientHeight; // la valeur d'origine de la coordonnée verticale de la i-ème image
suis [i] = math.random () * 20; // L'amplitude des oscillations gauche et droite de la I-Thing Picture
stx [i] = 0,02 + math.random () / 10; // la longueur du pas de la direction x de la 1e image
Sty [i] = 0,7 + math.random (); // la longueur de pas de la i-ème image de l'image y
// Génera une div qui tient l'image du flocon de neige et définit ses coordonnées absolues
var snowflakediv = document.CreateElement ('div');
SnowFlakedIv.setAttribute ('id', 'dot' + i);
SnowFlakedIv.Style.Position = 'Absolute';
Snowflakediv.style.top = 15;
Snowflakediv.style.left = 15;
// générer un objet d'image de flocon de neige, régler la largeur et la hauteur et ajouter div
var snowflakeImg = document.CreateElement ('img');
SnowflakeImg.setAttribute («src», snowsrc);
SnowflakeImg.style.width = 30;
SnowflakeImg.style.height = 30;
// Ajoutez le div de flocon de neige dans le document et enregistrez-le via le tableau
Snowflakediv.ApendChild (SnowflakeImg);
Document.Body.ApendChild (SnowFlakediv);
flocons de neige [i] = neigeflakev;
}
fonction neige () {
pour (i = 0; i <non; ++ i) {
// La coordonnée verticale plus la longueur de pas de la 1e photo
yp [i] + = sty [i];
// Si la nouvelle coordonnée dépasse le bord inférieur de l'écran, réinitialisez les informations de l'image, y compris les coordonnées horizontales, les coordonnées verticales et la taille de l'étape dans la direction X et la taille de l'étape dans la direction Y
if (yp [i]> clientHeight-50) {
// réaffecte les coordonnées horizontales de l'image
xp [i] = math.random () * (clientwidth-am [i] -30);
// réaffecter les coordonnées verticales de l'image
yp [i] = 0;
}
dx [i] + = stx [i]; // ajouter une étape
// manipuler directement le div de flocon de neige correspondant dans le tableau
var neigeflakediv = flocons de neige [i];
// Mette à jour les coordonnées verticales de l'image
neigeflakedv.style.top = yp [i];
// Mette à jour l'axe horizontal de l'image
neigeflakediv.style.left = xp [i] + am [i] * math.sin (dx [i]);
}
// Définit la période de rafraîchissement de l'animation
setTimeout ("neige ()", 10);
}
// appelle la fonction snowie ()
neige();
</cript>
</docy>
Ce qui précède est tout le code, et l'effet est assez bon. Pour l'explication spécifique, veuillez vous référer aux commentaires. Je ne parlerai pas beaucoup de bêtises ici. J'espère que ce sera utile à tout le monde.