Read the JavaScript page special Effects Example Encyclopedia of the effect of the example, feel worthwhile to learn.
Change the picture to snowflake, complete the effect of a snowflake drift.
And, some of the content is older, then the scholar to get rid of it.
Including:
1. For the left and top operations only support IE browser, this line, you must support chrome.
2. Control the whereabouts of the picture to retrieve the element, not good, then the group to maintain, direct operation of the array to maintain the object, the restart is not faster.
3. Add elements to the document and change it directly to the way you create the element object through the JS code.
Realize the idea:
1. Initialize to generate 10 div, all using absolute positioning, each div put a snowflake picture, set well wide, and save in the array, convenient for the function of snow behind directly operation.
2. Initialize the horizontal and vertical coordinates of each div, always give the snowflake a drop start position.
3. Initialize each snowflake to set a vertical drop step, a horizontal swing step, so that each snowflake will fall and swing at different speeds.
4. Do a snow function, every 10 seconds to tune the function, each time the function, is to control each snowflake in the vertical whereabouts of one of its own step, the horizontal swing through the sine function to calculate a sine value multiplied by the amplitude, so that snowflakes fall is in accordance with the sine wave form.
Pictures can be found on the Internet.
The following code is compatible with Ie8+,chrome.
Copy Code code as follows:
<BODY>
<script language= "JavaScript" >
In the process of a picture, the trajectory of the horizontal axis is a sinusoidal curve centered on a point.
Uses the SetTimeout function to complete the animation function
Image
var snowsrc= "Snowflake. png"
Number of Snowflakes
var no = 10;
Declare variables, XP represents the horizontal axis, YP represents ordinate >
var dx, XP, YP;
Declaring variables, am represents the amplitude of the left and right swings, STX represents the offset step of the horizontal axis, sty represents the step length of the ordinate >
var am, STX, sty;
{
Gets the width of the current window
ClientWidth = Document.body.clientWidth;
Gets the height of the current window
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 sty = new Array ();
var snowflakes = new Array ();
for (i = 0; i < no; + i) {
Dx[i] = 0;
The initial value of the horizontal axis of the first picture
Xp[i] = Math.random () * (CLIENTWIDTH-50);
Yp[i] = Math.random () *clientheight;//the ordinate initial value of the first picture
Am[i] = Math.random () *20; The amplitude of the left and right swing of the first picture
Stx[i] = 0.02 + math.random ()/10; Step I in the x direction of a picture
Sty[i] = 0.7 + math.random (); Step I in the y direction of the picture
Generate a div that holds the snowflake picture and set its absolute coordinates
var snowflakediv = document.createelement (' div ');
Snowflakediv.setattribute (' id ', ' dot ' + i);
snowFlakeDiv.style.position = ' absolute ';
SnowFlakeDiv.style.top = 15;
SnowFlakeDiv.style.left = 15;
Create a snowflake Image object, set the width high, and add div
var snowflakeimg = document.createelement (' img ');
Snowflakeimg.setattribute (' src ', snowsrc);
SnowFlakeImg.style.width = 30;
SnowFlakeImg.style.height = 30;
Adds a snowflake div to the document and saves it through an array
Snowflakediv.appendchild (SNOWFLAKEIMG);
Document.body.appendChild (SNOWFLAKEDIV);
Snowflakes[i] = Snowflakediv;
}
Function Snow () {
for (i = 0; i < no; + i) {
The ordinate of the first I picture plus the step size
Yp[i] + = Sty[i];
If the new coordinates exceed the bottom edge of the screen, reset the picture's information, including the horizontal, ordinate, and X-direction steps and the Y-direction steps
if (Yp[i] > clientHeight-50) {
Re-assign the horizontal axis of the picture
Xp[i] = Math.random () * (clientwidth-am[i]-30);
Re-assign the ordinate of a picture
Yp[i] = 0;
}
Dx[i] = = STX[I];//DX variable plus one step
Directly manipulate the corresponding snowflake div in the array
var snowflakediv = snowflakes[i];
Update the ordinate of a picture
SnowFlakeDiv.style.top = Yp[i];
Update the horizontal axis of the picture
SnowFlakeDiv.style.left = Xp[i] + am[i]*math.sin (dx[i));
}
Set the time period for animation refresh
SetTimeout ("Snow ()", 10);
}
Calling the Snowie () function
Snow ();
</script>
</BODY>
The above is the whole code, the effect is very good, the specific explanation please see the annotation, here is not much nonsense, hope for everyone can help.
