JavaScript to achieve snow effect "instance code" _javascript tips

Principle:

1, JS dynamic Create div, specify class class set different background chart style to show different snowflakes effect.

2. JS gets the created div and changes its Top property value, and deletes the move div when the height of the drop is higher than the screen

3, it seems not perfect to spray

HTML code:

<! DOCTYPE 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 div function Creatdiv () {//Create div and append to parent element
  var snowdiv=document.createelement ("div");
  document.getElementById ("Js_sonw"). AppendChild (Snowdiv);
  Let the creation div class be random, showing the 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];
  Gets the left property value of the div (random) and assigns a value to the created div var whatleft=getleft () + ' px ';
  Snowdiv.style.left=whatleft;
return snowdiv;
  //Gets the random Left property value function GetLeft () {//Gets the maximum left property value of the Div, which is the width of the parent element var Eleparent=document.getelementbyid ("Js_sonw");
  Gets all style style var style=window.getcomputedstyle (eleparent) of the parent element;
  The left in the CSS is a negative number here is subtracted under 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 move the function MoveDown () {//Get the Moving object var moveelem=creatdiv ();
 Get all the style property values for a Move object var elestyle=window.getcomputedstyle (Moveelem);
  Gets its Top property value var eletop=parseint (elestyle.top);
    Set the timer to dynamically change the top property value of the Moving object var t=setinterval (function () {eletop++;
    The new top value is paid to the moving object moveelem.style.top=eletop+ "px";
      When falling to the height of the screen, stop the timer and remove the moving object from the parent element if (eletop>=window.innerheight) {clearinterval (t);
    document.getElementById ("Js_sonw"). RemoveChild (Moveelem); },10)//falling speed is not 10 milliseconds drop 1px} function init () {///dynamically acquire and set the height of the body document.body.style.height=window.innerheight+ "px"
  ;
  Create a Move object every 500 milliseconds and execute the Move function var t=setinterval (function () {movedown ();
},100); }

Above this JavaScript to achieve the snow effect "instance code" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.