After reading the examples of the image floating down in the JavaScript web page special effect examples, I think it is worth learning.
Change the picture to a snowflake picture to complete the effect of a snowflake falling.
Moreover, some of the contents are relatively outdated, so let’s change them by scholars.
include:
1. The operations on left and top only support IE browser. This is OK. It must support chrome.
2. To control the whereabouts of the image, you also need to search for element. If not, then change it to array maintenance and directly operate the objects maintained in the array, which will not be faster.
3. Adding elements to the document directly changes to creating element objects through JS code.
Implementation ideas:
1. Initialize and generate 10 divs, all of which are absolutely positioned. Put a snowflake picture in each div, set the width and height, and save it in an array, so that the functions that snow later can operate directly.
2. Initialize the horizontal and vertical coordinates of each div, and always give the snowflake a starting position for the fall.
3. Initialize each snowflake with a vertical drop step and a horizontal swing step, so that each snowflake will fall and swing at a different speed.
4. Make a snowing function, adjust the function every 10 seconds. Each time, it controls the function to control the length of each snowflake falling vertically. The horizontal swing is calculated by sine function and multiplied by the amplitude. In this way, the snowflakes fall according to the sine waveform.
You can find any pictures online.
The following code is compatible with IE8+ and Chrome.
The code copy is as follows:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//In the process of the picture, the trajectory of the horizontal coordinate is a sinusoidal curve centered on a point.
//The animation function is completed by using the setTimeout function
//picture
var snowsrc="snowflake.png"
//The number of snowflakes
var no = 10;
//Declare variables, xp represents horizontal coordinates, yp represents vertical coordinates>
var dx, xp, yp;
//Declare variables, am represents the amplitude of left and right swings, stx represents the offset step of the horizontal coordinate, sty represents the step of the vertical coordinate>
var am, stx, sty;
{
//Get the width of the current window
clientWidth = document.body.clientWidth;
//Get 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 coordinate of the i-th picture
xp[i] = Math.random()*(clientWidth-50);
yp[i] = Math.random()*clientHeight;//The original value of the vertical coordinate of the i-th picture
am[i] = Math.random()*20; //The amplitude of left and right swings of the i-th picture
stx[i] = 0.02 + Math.random()/10; //The step length of the x direction of the i-th picture
sty[i] = 0.7 + Math.random(); //The step length of the i-th picture y direction
// 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;
// Generate a snowflake image object, set the width and height, and add div
var snowFlakeImg = document.createElement('img');
snowFlakeImg.setAttribute('src', snowsrc);
snowFlakeImg.style.width = 30;
snowFlakeImg.style.height = 30;
//Add the snowflake div into the document and save it through the array
snowFlakeDiv.appendChild(snowFlakeImg);
document.body.appendChild(snowFlakeDiv);
snowFlakes[i] = snowFlakeDiv;
}
function snow() {
for (i = 0; i < no; ++ i) {
//The vertical coordinate plus step length of the i-th picture
yp[i] += sty[i];
//If the new coordinate exceeds the lower edge of the screen, reset the information of the picture, including the horizontal coordinate, vertical coordinate, and the step size in the x-direction and the step size in the y-direction
if (yp[i] > clientHeight-50) {
//Reassign the horizontal coordinates of the picture
xp[i] = Math.random()*(clientWidth-am[i]-30);
//Reassign the vertical coordinates of the picture
yp[i] = 0;
}
dx[i] += stx[i];// Add one step
//Directly manipulate the corresponding snowflake div in the array
var snowFlakeDiv = snowFlakes[i];
//Update the vertical coordinates of the 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 all the code, and the effect is quite good. For the specific explanation, please refer to the comments. I won’t talk much nonsense here. I hope it will be helpful to everyone.