Effect chart
Core code:
Copy Code code as follows:
$ (function () {
$ (document). Click (Function (event) {
/*1. Create a div and insert it into the body
*2. Set its initial position: top for screen height, left for mouse clicks, mouse Pagex value;
*/
Create Div
var $div = $ ("<div/>");
var eleft = Event.pagex;
var etop = Event.pagey;
var cheight = document.documentElement.clientHeight;
Set the color, size, and location of the initialization
$div. css ({"width": 4, "height": "Background-color": "Red", "top": Cheight, "left": Eleft});
Insert into the body of the page;
$ ("Body"). Append ($div);
Do not show scroll bars
$ ("Body"). CSS ("Overflow", "hidden");
Let the div move up and move to the mouse position, delete the div element, and then perform the fireworks effect;
$div. Animate ({"Top": etop},700,function () {
Remove Div
$ (this). Remove ();
* * Fireworks Effect
*1. Fireworks are a lot of div makeup
*2, the color of each firework is different.
*3. The location of the fireworks is also different
*4. Fireworks spread differently.
*5. Fireworks have a feeling of descent
*/
Use loops to build a lot of div to show fireworks
for (i=0;i<20;i++) {
$ ("Body"). Append ($ ("<div class= ' yh ' ></div>"));
}
* * Fireworks color is random, and is used to represent the color value of 16, so with a random number combined with 16;
*16 the maximum value of the FFFFFF, converted to decimal 16777215;
*math.random () *16777215 formula can get the number between 0-16777215, because it is a decimal, so use the rounding;
*math.ceil (Math.random () *16777215) generates a random decimal value within the range of color values;
*math.random () *9+1 formula can get the number between 1-10, and so on
*.tostring (16) method, is to get the decimal, converted to 16 into the system, that is, a random color value;
*/
var sjcolor = ""
function Changcolor () {
Sjcolor = Math.ceil (Math.random () *16777215). toString (16)//;
When this produces a random color value, less than 6 digits of the incoming, need to be padded, and do not change its value, so to be in front of this number plus 0;
while (sjcolor.length<6) {
Sjcolor = "0" +sjcolor;
}
}
Set the color and position of the fireworks Div, scatter, fall
$ (". YH"). CSS ({"width": 3, "height": 3, "top": Etop, "left": Eleft});
* * Fireworks scatter to set left and up
*math.random () *20-20 here to reduce the 20, because the fireworks are scattered from the center point of the left and right,
* Minimum random number of 0-10 =-10, maximum random number of 20-10=10; so it's 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++) {
To determine when the mouse clicks on the right fireworks or on the left fireworks
if (yhx<0) {
DOWNPW ($this, "+");/Right down.
}else{
DOWNPW ($this, "-")/left Down
}
}
The drop effect, which also changes the elements of the fireworks x and Y, will have a parabolic sensation, and then complete the animation to remove this fireworks element
function DOWNPW (odiv,f) {
Odiv.animate ({"Top": "+=30", "left": f+ "=4"},50,function () {
settimeout (function () {odiv.remove ()},2000);
})
}
});
});
})
})
First, function
Click on the page to show the effect of the above picture, and fall.
Second, functional analysis
1. Create div when clicked and insert into body
2. Fireworks are a lot of div composition, so also to create these Div
3. Each fireworks color is different, so the need for random function processing color value
4. The location of the fireworks is also different, so also need random function processing location
5. Fireworks spread out in different directions
6. The fireworks to fall feeling
Third, Summary:
3.1. The number of random number Math.random () 0 to one;
3.11math.random () multiplied by any number, the result is the value between 0-this multiplier,
Math.random () *9 result is the number between 0-9
3.12 Add this number if you want the starting value to be a specified number, not zero;
Math.random () *8+2 result is the number between 2-10
3.13 minus the half of the multiplier if you want the number between positive and negative
Math.random () *8-4, the result is the number between +4 and-4
3.2 Movement Core
3.21 is to let the elements in the current page of the x-coordinate, or y-coordinate changes (add, subtract, multiply, divide, etc., as long as the value can be changed by the operation, are OK)
3.22 How to change to appear to be athletic?
Each time you change, it is the current x or Y coordinate of the reference element. (The coordinates of this element will change as each time changes) so always get the x or Y coordinate value after the current element changes.
3.3 Random Color values
The color value, which is the hexadecimal number. And that value has scope, so we have to get to the range first.
000000-ffffff.
And then convert to a decimal range
0-16777215
With this range you can use random numbers to generate color values in this range. Of course the last thing to turn into 16, and do not forget the color value before the "#" number
3.4 Sense of descent
In fact, let the elements have a change in the parabola, that is, the value of the X and y of the element, and the change in the same time.
(in the use of settimeout, the inside of this, do not point to the wrong!) ~ ~)
Online Demo: http://demo.jb51.net/js/2012/myyanhua/
Packaged Downloads: Myyanhua_jb51.rar
