$(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, and left is the pageX value of the mouse when the mouse is clicked;
*/
//Create a DIV
var $div = $("<div/>");
var eLeft = ;
var etop = ;
var cHeight = ;
//Set the color, size, and its initialization position
$({"width":4,"height":15,"background-color":"red","top":cHeight,"left":eLeft});
//Insert into the body of the page;
$("body").append($div);
//Do not scroll bars appear
$("body").css("overflow","hidden");
//After moving the DIV upwards and moving to the mouse position, delete this DIV element and then execute the firework effect;
$({"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 location of fireworks is also different
*4. The direction of fireworks scattering is different
*5. Fireworks feel like they are falling
*/
//Build many DIVs using cycles to represent fireworks
for(i=0;i<20;i++){
$("body").append($("<div class='yh'></div>"));
}
/*The color of fireworks is random, and the color value is represented by hexadecimal, so random numbers are combined with hexadecimal;
*The maximum value of hexadecimal ffffff, converted to decimal 16777215;
*()*16777215 formula can obtain numbers between 0-16777215. Because it is a decimal, rounding is required;
*(()*16777215) Generate a random decimal value within the range of color values;
*()*9+1 formula can get a number between 1-10, and so on
The *.toString(16) method is to convert the obtained decimal to hexadecimal, that is, a random color value;
*/
var sjColor = ""
function changColor(){
sjColor = (()*16777215).toString(16)//;
//When the random color value generated is less than 6 digits, it needs to be filled without changing its value, so zero must be added before this number;
while(<6){
sjColor = "0"+sjColor;
}
}
//Set the color and position of the fireworks DIV, disperse, fall
$(".yh").css({"width":3,"height":3,"top":etop,"left":eLeft});
/*The fireworks should be left and upper when dispersed
*()*20-20 Here we need to reduce 20, because the fireworks scatter from the left and right of the center point.
* 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 = ()*400-200;
var yhY = ()*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++){
//Judge whether the fireworks on the right or the fireworks on the left when the mouse clicks
if(yhX<0){
downPw($this,"+");//Downright
}else{
downPw($this,"-");//Down left
}
}
//The fall effect, that is, change the X and Y of the firework elements at the same time, and there will be a parabolic feeling. Then, after completing the animation, delete the firework elements
function downPw(odiv,f){
({"top":"+=30","left":f+"=4"},50,function(){
setTimeout(function(){()},2000);
})
}
});
});
})
})