Home > Developer > Web Develop
Read the JavaScript page effect instances in the picture floating in the effects of the example, feel worthy of hands-on learning.
Change the picture to a snowflake and complete the effect of a snowflake.
And, some of the content is relatively old, then the scholar to change it.
Including:
1. The left and top operations only support IE browser, this line, must support Chrome.
2. Control the picture falling process also to retrieve element, not good, then change the group to maintain, directly manipulate the objects maintained in the array, the start is not faster.
3. Add elements to the document directly to the way you create an element object from the JS code.
Implementation ideas:
1. Initialize the generated 10 div, all using absolute positioning, each div put a snowflake picture, set the width of the height, and save in the array, easy to use the function of the snow behind the direct operation.
2. Initialize the horizontal and vertical coordinates of each div, always give the snowflake a drop start position.
3. Initialize each snowflake with a vertical drop step, a transverse swing step, so that each snowflake falls and swings at a different speed.
4. Do a snow function, every 10 seconds to adjust the function, each time the function is to control each snowflake in the vertical drop of a self-step, transverse swing by the sine function to calculate a sine value multiplied by the amplitude, so that the snowflake drop is in accordance with a sine wave form.
Images can be found online.
The following code is compatible with Ie8+,chrome.
<BODY> <script language= "JavaScript" >//in the process of the picture, the trajectory of the horizontal axis is a sinusoidal curve centered on a point //using the SetTimeout function to complete the function of the animation
//Image varsnowsrc= "Snowflake. png"//Number of Snowflakes varNo = 10; //declaring variables, XP represents the horizontal axis, yp means ordinate > varDX, XP, YP; //declare variable, am represents the amplitude of the left and right swing, STX represents the offset step of the horizontal axis, sty represents the Ordinate step > varam, STX, sty; { //gets the width of the current windowClientWidth =Document.body.clientWidth; //gets the height of the current windowClientHeight =Document.body.clientHeight; } varDX =NewArray (); varXP =NewArray (); varYP =NewArray (); varAM =NewArray (); varSTX =NewArray (); varSty =NewArray (); varSnowflakes =NewArray (); for(i = 0; i < no; + +)i) {Dx[i]= 0; //the initial value of the horizontal axis of the first pictureXp[i] = Math.random () * (clientWidth-50); Yp[i]= Math.random () *clientheight;//the ordinate initial value of the first pictureAm[i] = Math.random () *20;//The amplitude of the left and right swing of the picture IStx[i] = 0.02 + math.random ()/10; The X-direction step sty[i] = 0.7 + math.random () of the first picture//step in the y direction of the I picture //Create a div that holds the snowflake picture and set its absolute coordinates varSnowflakediv = document.createelement (' div '); Snowflakediv.setattribute (' id ', ' dot ' +i); SnowFlakeDiv.style.position= ' absolute '; SnowFlakeDiv.style.top= 15; SnowFlakeDiv.style.left= 15; //Create a Snowflake Picture object, set the width height, and join the Div varsnowflakeimg = document.createelement (' img '); Snowflakeimg.setattribute (' SRC ', SNOWSRC); SnowFlakeImg.style.width= 30; SnowFlakeImg.style.height= 30; //Add a snowflake div to the document and save it through an arraySnowflakediv.appendchild (SNOWFLAKEIMG); Document.body.appendChild (SNOWFLAKEDIV); Snowflakes[i]=Snowflakediv; } functionSnow () { for(i = 0; i < no; + +)i) {//the ordinate plus step of the I-pictureYp[i] + =Sty[i]; //if the new coordinates exceed the bottom edge of the screen, reset the picture's information, including the horizontal and vertical axes, and the step in the x direction and the step in the y direction if(Yp[i] > clientHeight-50) { //the horizontal axis of the re-assigned imageXp[i] = Math.random () * (clientwidth-am[i]-30); //the ordinate of the re-assigned pictureYp[i] = 0; } Dx[i]+ = Stx[i];//DX variable plus one step //directly manipulate the corresponding snowflake div in the array varSnowflakediv =Snowflakes[i]; //update the ordinate of a pictureSnowFlakeDiv.style.top =Yp[i]; //Update the horizontal axis of the pictureSnowFlakeDiv.style.left = Xp[i] + am[i]*Math.sin (Dx[i]); } //set the time period for animation refreshSetTimeout ("Snow ()", 10); } //Call the Snowie () functionSnow (); </script></BODY>
Web front-End learning notes---the effect of snowflakes falling
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
