Home > Developer > JavaScript
Principle:
1, JS dynamic creation Div, specify the class class set different background map style display different snowflake effect.
2. JS gets the created div and changes its Top property value, deleting the moving div when the height of the drop is greater than the screen high
3, seems not perfect do not spray
Effect preview: http://wjf444128852.github.io/demo02/snow/index.html
HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Snowflakes Flying</title> <Linkrel= "stylesheet"href= "Css/index.css"> <Scriptsrc= "Js/move.js"></Script></Head><Body> <Divclass= "Snow_parent"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 DivfunctionCreatdiv () {//Create Div and append to parent element varSnowdiv=document.createelement ("div"); document.getElementById ("Js_sonw"). appendchild (Snowdiv); //make Div class random, show different snowflakes varwhatname=["Snow_one parent", "Snow_two parent", "Snow_three parent", "Snow_four parent"]; varIndex=math.floor (Math.random () *whatname.length); Snowdiv.classname=Whatname[index]; //gets the left property value of the div (random) and assigns a value to the div created varWhatleft=getleft () + ' px '; SnowDiv.style.left=Whatleft; returnSnowdiv;}//get the random left property valuefunctionGetLeft () {//gets the maximum left property value of the Div, which is the width of the parent element varEleparent=document.getelementbyid ("Js_sonw"); //gets all the style styles of the parent element varstyle=window.getComputedStyle (eleparent); //the left in the CSS is negative, minus the next . varMaxwidth=parseint (style.width) +70; //let the left of the created div be a random value varRandomleft=math.floor (Math.random () *maxWidth); returnRandomleft;}//Let it move downfunctionMoveDown () {//Get moving objects varmoveelem=Creatdiv (); //get all the style property values for a moving object varelestyle=window.getComputedStyle (Moveelem); //gets the value of its Top property vareletop=parseint (elestyle.top); //set the timer to dynamically change the top property value of a moving object varT=setinterval (function() {eletop++; //pay the new top value to the moving objectmoveelem.style.top=eletop+ "px"; //Stop the timer and remove the moving object from the parent element when it falls to the height of the screen if(eletop>=window.innerheight) {clearinterval (t); document.getElementById ("Js_sonw"). RemoveChild (Moveelem); } },10);//drop Speed No 10 milliseconds drop 1px}functioninit () {//dynamically gets and sets the height of the bodydocument.body.style.height=window.innerheight+ "px"; //Create a Move object every 500 milliseconds and perform a move function varT=setinterval (function() {movedown (); },100);}
JavaScript for Snow effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
