JQuery-based fireworks (sports-related) Click on the screen to display fireworks

Source: Internet
Author: User



Core code:
Copy codeThe Code is as follows:
$ (Function (){
$ (Document). click (function (event ){
/* 1. Create a DIV and insert it into the body.
* 2. set its initial position: TOP is the screen height, and left is the pageX value of the mouse when you click the mouse;
*/
// Create a DIV
Var $ div =$ ("<div/> ");
Var eLeft = event. pageX;
Var etop = event. pageY;
Var cHeight = document.doc umentElement. clientHeight;
// Set the color, size, and initial position.
Includiv.css ({"width": 4, "height": 15, "background-color": "red", "top": cHeight, "left": eLeft });
// Insert it to the page body;
$ ("Body"). append ($ div );
// Do not display the scroll bar
$ ("Body" ).css ("overflow", "hidden ");
// Move the DIV up and move it to the mouse position, delete the DIV element, and then execute the fireworks effect;
$ Div. animate ({"top": etop}, 700, function (){
// Remove the DIV
$ (This). remove ();
/* Fireworks
* 1. Fireworks are composed of multiple DIV
* 2. The colors of each fireworks are different.
* 3. Different fireworks are located.
* 4. Different fireworks are scattered in different directions.
* 5. The fireworks are falling down
*/
// Create multiple DIV in a loop to represent the fireworks
For (I = 0; I <20; I ++ ){
$ ("Body"). append ($ ("<div class = 'yh'> </div> "));
}
/* The fireworks are randomly colored and represent the color value in hexadecimal notation. Therefore, random numbers are used in hexadecimal notation;
* The maximum value in hexadecimal format is ffffff, which is converted to decimal 16777215;
* The Math. random () * 16777215 formula can be used to obtain the number between 0 and. Because it is a decimal number, an integer is used;
* Math. ceil (Math. random () * 16777215) generates a random decimal value within the color value range;
* Math. random () * 9 + 1 formula can be used to obtain the number between 1 and 10, and so on.
*. The toString (16) method converts the obtained decimal value to a hexadecimal value, that is, a random color value;
*/

Var sjColor = ""
Function changColor (){
SjColor = Math. ceil (Math. random () * 16777215). toString (16 )//;
// When the generated random color value is less than 6 digits, it must be completed without changing the value. Therefore, add zero before the number;
While (sjColor. length <6 ){
SjColor = "0" + sjColor;
}
}


// Set the color and position of the fireworks DIV.
$ (". Yh" ).css ({"width": 3, "height": 3, "top": etop, "left": eLeft });
/* Set the fireworks to the left and top.
* Math. random () * 20-20 minus 20 here, because the fireworks are scattered from the left and right of the center,
* The minimum random number is 0-10 =-10, and the maximum random number is 20-10 = 10. Therefore, it is between positive and negative 10.
*/
$ (". Yh"). each (function (index, element ){
Var $ this = $ (this );
ChangColor ()
Var yhX = Math. random () * 400-200;
Var yhY = Math. random () * 600-300;
$ This.
Css ({"background-color": "#" + sjColor, "width": 3, "height": 3 }).
Animate ({"top": etop-yhY, "left": eLeft-yhX}, 500); // scatter
For (I = 0; I <30; I ++ ){
// Determine whether the fireworks on the right or the fireworks on the left when the mouse clicks
If (yhX <0 ){
DownPw ($ this, "+"); // drop down right
} Else {
DownPw ($ this, "-"); // left drop
}
}

// The drop-down effect, that is, changing the X and Y of the fireworks element at the same time will have a parabolic effect. After the animation is completed, delete the fireworks element.
Function downPw (odiv, f ){
Odiv. animate ({"top": "+ = 30", "left": f + "= 4"}, 50, function (){
SetTimeout (function () {odiv. remove ()}, 2000 );
})
}
});
});
})
})

I. Functions
Click the effect on the page and drop down.
Ii. Function Analysis
1. Create a DIV and insert it to the body when you click it.
2. Fireworks are composed of multiple Divs. Therefore, you must also create these divs.
3. The color of each fireworks is different, so the random function is required to process the color value.
4. The positions of fireworks are different, so random functions are required to process the positions.
5. Different fireworks are scattered in different directions.
6. The fireworks will fall down.
Iii. Summary:
3. 1. random Number Math. random () number between zero and one;
3.11Math.random () multiplied by any number, the result is the value between 0 and the multiplier,
Math. random () * 9 is the number between 0 and 9.
3.12 if you want to set the starting value to another specified number, not zero, add this number;
Math. random () * 8 + 2 returns the number between 2 and 10.
3.13 if we want to calculate the number between positive and negative, we will subtract half of the multiplier.
Math. random () * 8-4. The result is the number between + 4 and-4.

3.2 sports core
3.21 means to change the X coordinate or Y coordinate of an element on the current page (addition, subtraction, multiplication, division, etc., as long as the operation can change this value)
3.22 how does one change to make it seem to be moving?
Each change is based on the current X or Y coordinate of the element. (Because the coordinates of this element change every time it is changed, we always need to get the X or Y coordinate values after the current element changes.

3.3 random color value
Color value, which is a hexadecimal number. This value also has a range, so we need to obtain its range first.
000000-FFFFFF.
Then convert it to the decimal range.
0-16777215
With this range, you can use a random number to generate a color value in this range. Of course, we still need to convert it to hexadecimal format, and do not forget to add "#" before the color value.

3.4 falls
In fact, let the elements have a parabolic change, that is, let the values of X and Y of the elements change at the same time.

(When setTimeout is used, do not point this to an error !~~)

Online Demo: http://demo.jb51.net/js/2012/myyanhua/
Package and download: myyan1__jb51.rar

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.