Fireworks effect based on jQuery (sports-related) click the screen to display fireworks_jquery

Rendering

Core code:

Copy code The 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 height of the screen, left is the pageX value of the mouse when the mouse is clicked;
*/
//Create DIV
var $div = $("

");
var eLeft = event.pageX;
var etop = event.pageY;
var cHeight = document.documentElement.clientHeight;
//Set the color, size, and initialization position
$div. css({"width":4,"height":15,"background-color":"red","top":cHeight,"left":eLeft});
//Insert into the body of the page Go;
$("body").append($div);
//Don't have scroll bars
$("body").css("overflow","hidden");
//Move the DIV up, and after moving it to the mouse position, delete the DIV element, and then perform the fireworks effect;
$div.animate({"top":etop},700,function(){
//Remove DIV
$(this).remove();
/*Firework effect
*1. Fireworks are composed of many DIVs
*2. The color of each firework is different
*3. The positions of the fireworks are also different
*4. The directions of the fireworks are different
*5. The fireworks have a falling feeling
*/
//Create many DIVs using loops , to represent fireworks
for(i=0;i<20;i ){
$("body").append($("

"));
}
/*The color of the fireworks is random, and the color value is expressed in hexadecimal, so random numbers are combined with hexadecimal;
*The maximum value in hexadecimal ffffff , converted to decimal 16777215;
*Math.random()*16777215 formula can get a number between 0-16777215, because it is a decimal, so rounding is required;
*Math.ceil(Math.random ()*16777215) generates a random decimal value within the color value range;
*Math.random()*9 1 formula can get a number between 1-10, and so on
*. The toString(16) method converts the obtained decimal number into hexadecimal number, which is a random color value;
*/

var sjColor = ""
function changColor(){
sjColor = Math.ceil(Math.random()*16777215).toString(16)//;
//When the random color value generated is less than 6 digits, it needs to be filled in , and does not change its value, so add zero in front of this number;
while(sjColor.length<6){
sjColor = "0" sjColor;
}
}


//Set the color and position of the fireworks DIV, scatter, and fall
$(".yh").css({"width":3,"height":3,"top": etop,"left":eLeft});
/*When the fireworks disperse, set left and top
*Math.random()*20-20. You need to subtract 20 here because the fireworks are from the left and right of the center point. Scattered,
* when the minimum random number is 0-10 = -10, when the maximum random number is 20-10=10; so it is between plus and minus 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);//Spread out
for(i=0;i<30;i ){
//Judge Fireworks on the right or left when the mouse is clicked
if(yhX<0){
downPw($this," ");//Down right
}else{
downPw($this," -");//Falling left
}
}

//Falling effect, that is, changing the X and Y of the firework element at the same time, it will have a parabola feel, and then delete the firework after completing the animation Element
function downPw(odiv,f){
odiv.animate({"top":" =30","left":f "=4"},50,function(){
setTimeout (function(){odiv.remove()},2000);
})
}
});
});
})
})

1. Function
Click on the page to see the effect shown above and fall.
2. Function analysis
1. Create a DIV when clicked and insert it into the body
2. Fireworks are composed of many DIVs, so these DIVs must also be created at the same time
3. The color of each firework They are different, so a random function is needed to process the color value
4. The position of the fireworks is also different, so a random function is also needed to process the position
5. The fireworks scatter in different directions
6. The fireworks feel like they are falling
3. Summary:
　3.1. Random number Math.random() is a number between zero and one;
　3.11Math.random() is multiplied by any number, and the result is between 0 and the multiplier. The value of Math.random()*9 is a number between 0-9
3.12 If you want the starting value to be another specified number, not zero, add this number;
　　Math.random()*8 2 The result is a number between 2-10
　3.13 If you want a number between positive and negative, subtract half of the multiplier
　　Math.random()* 8-4, the result is a number between 4 and -4

3.2 Movement core
3.21 is to change the X coordinate or Y coordinate of the element in the current page (addition, subtraction, multiplication , division, etc., as long as the operation can change the value)
3.22 How to change it so that it looks like it is moving?
Every time it changes, it refers to the current X or Y coordinate of the reference element. (Because every time it changes, the coordinates of this element will change) Therefore, it is always necessary to obtain the X or Y coordinate value of the current element after it changes.

3.3 Random color value
Color value is a hexadecimal number. And this value also has a range, so we need to get its range first.
000000-FFFFFF.
Then it needs to be converted into a decimal range
0-16777215
With this range, random numbers can be used to generate color values ​​within this range. Of course, you still have to convert it to hexadecimal in the end, and don't forget to add the "#" sign in front of the color value

3.4 Falling Feeling
In fact, it is to let the element have a parabolic change, that is, let the element's The values ​​of X and Y change at the same time.

(When using setTimeout, don’t point this to the wrong one!~~)

Online demo:
http://demo.jb51.net/js/2012 /myyanhua/Package download:
myyanhua_jb51.rar

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn