The examples in this article share the implementation of the snowflake flying effect of javascript for your reference. The specific content is as follows
principle:
1. js dynamically creates DIV, specifying the CLASS class to set different background image styles to display different snowflake effects.
2. js gets the created DIV and changes its top attribute value. When the falling height is greater than the screen height, the mobile div will be deleted.
3. Don't spray if it seems to be incomplete
Effect preview: http://wjf444128852.github.io/demo02/snow/index.html
HTML code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Snowflakes flying</title> <link rel="stylesheet" href="css/index.css"> <script src="js/move.js"></script></head><body> <div id="js_sonw"> </div></body></html>
CSS Code
*{ margin:0; padding:0; list-style: none; border: none;}body{ width: 100%; height:600px; background:#000;}.snow_parent{ position: relative; width: 100%; height:100%; overflow: hidden; margin: 0 auto;}.snow_parent div.parent{ background-image: url(../img/snow.png); float: left; -webkit-transform: scale(.1); -moz-transform: scale(.1); -o-transform: scale(.1); -ms-transform: scale(.1); transform: scale(.1); position: absolute;}.snow_one{ width: 180px; height: 180px; background-position:0 0; background-repeat: no-repeat; left:-70px; top: -95px;}.snow_two{ width: 140px; height: 140px; background-position:-220px -18px; left:-30px; top: -75px;}.snow_three{ width: 150px; height: 150px; background-position:-400px -15px; left:-20px; top: -80px;}.snow_four{ width: 160px; height: 160px; background-position:-10px -206px; }.snow_four{ left:-10px; top: -85px;}JS code:
/* creatBy jiucheng 2016-4-24*/ window.onload=function(){ init();}// Create DIVfunction creatDiv(){ // Create DIV and append to the parent element var snowDiv=document.createElement("div"); document.getElementById("js_sonw").appendChild(snowDiv); // Make the class that creates DIV randomly and displays different snowflakes var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"]; var index=Math.floor(Math.random()*whatName.length); snowDiv.className=whatName[index]; // Get the left attribute value of the DIV (random) and assign it to the created DIV var whatLeft=getLeft()+'px'; snowDiv.style.left=whatLeft; return snowDiv;}// Get the random left attribute value function getLeft(){ // Get the maximum left attribute value of the DIV, that is, the width of the parent element var eleParent=document.getElementById("js_sonw"); // Get all styles of the parent element var var style=window.getComputedStyle(eleParent); // The left in CSS is a negative number here must be subtracted here var maxWidth=parseInt(style.width)+70; // Let the left of the created DIV be a random value var randomLeft=Math.floor(Math.random()*maxWidth); return randomLeft;}// Let it moveDown(){ // Get the moving object var moveElem=creatDiv(); // Get all style attribute values of the moving object var eleStyle=window.getComputedStyle(moveElem); // Get all the style attribute values of the moving object var eleStyle=window.getComputedStyle(moveElem); // Get its top attribute value var eleTop=parseInt(eleStyle.top); // Set the timer to dynamically change the top attribute value of the moving object var t=setInterval(function(){ eleTop++; // Pay the new top value to the moving object moveElem.style.top=eleTop+"px"; // When it falls to the height of the screen, stop the timer and delete the moving object from the parent element if(eleTop>=window.innerHeight){ clearInterval(t); document.getElementById("js_sonw").removeChild(moveElem); } },10); // The drop speed does not fall for 10 milliseconds and drop 1px}function init(){ // Dynamically get and set the height of the body document.body.style.height=window.innerHeight+"px"; // Create a moving object every 500 milliseconds and execute the movement function var t=setInterval(function(){ moveDown(); },100);}The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.