jQuery를 기반으로 한 불꽃놀이 효과(스포츠 관련) 화면을 클릭하면 Fireworks_jquery가 표시됩니다.

렌더링

핵심 코드 :

코드 복사 코드는 다음과 같습니다

$(function(){
$(document).click(function(event){
/*1. DIV를 생성하고 본문에 삽입합니다
*2. 초기 설정 position: TOP은 화면의 높이, 왼쪽은 마우스 클릭 시 마우스의 pageX 값
*/
//DIV 생성
var $div = $("

");
var eLeft = event.pageX;
var etop = event.pageY;
var cHeight = document.documentElement.clientHeight;
//색상, 크기, 초기화 설정 position
$div.css({"width":4,"height":15,"ground-color":"red","top":cHeight,"left":eLeft})
/ /페이지 본문에 삽입하세요.
$("body").append($div)
//스크롤 막대가 없습니다.
$("body").css(" Overflow","hidden");
//DIV를 위로 이동한 후 마우스 위치로 이동한 후 DIV 요소를 삭제한 후 불꽃놀이 효과를 수행합니다.
$div.animate({"top ":etop},700,function(){
//DIV 제거
$(this).remove();
/*불꽃 효과
*1. 불꽃은 여러 개의 DIV로 구성됩니다
*2. 불꽃의 색깔이 다릅니다
*3. 불꽃의 위치도 다릅니다
*4 불꽃의 방향이 다릅니다
*5. 느낌
*/
//불꽃놀이를 표현하기 위해 루프를 사용하여 많은 DIV를 만듭니다.
for(i=0;i$("body").append($( "

"));
}
/*불꽃의 색상은 랜덤이며, 색상 값은 16진수로 표현되므로 랜덤 숫자는 16진수와 결합됨;
*16진수 ffffff의 최대값, 10진수 16777215;
*Math.random()*16777215 수식은 10진수이기 때문에 0-16777215 사이의 숫자를 얻을 수 있습니다. 필수;
*Math.ceil(Math.random ()*16777215)은 색상 값 범위 내에서 임의의 10진수 값을 생성합니다.
*Math.random()*9 1 수식은 1-10 사이의 숫자를 얻을 수 있습니다.
* 등입니다. toString(16) 메서드는 얻은 10진수를 임의의 색상 값인 16진수로 변환합니다.
*/

var sjColor = ""
function changColor(){
sjColor = Math.ceil(Math.random()*16777215).toString(16)//
//생성된 임의의 색상 값이 6자리 미만인 경우 에 채워지고 값이 변경되지 않으므로 이 숫자 앞에 0을 추가하세요.
while(sjColor.lengthsjColor = "0" sjColor;


//불꽃놀이 DIV, 분산, 낙하의 색상 및 위치 설정
$(".yh").css({"width":3,"height":3 ,"top": etop,"left":eLeft});
/*불꽃놀이가 흩어지면 왼쪽과 위쪽을 설정합니다
*Math.random()*20-20을 빼야 합니다. 불꽃놀이는 중심점의 왼쪽과 오른쪽에서 흩어집니다.
* 최소 난수는 0-10 = -10, 최대 난수는 20-10=10이므로 플러스와 사이입니다. 빼기 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, "너비":3,"높이":3}).
animate({"top":etop-yhY,"left":eLeft-yhX},500);//확산
for(i =0;i//마우스 클릭시 불꽃이 오른쪽인지 왼쪽인지 판단
if(yhXdownPw($this," ");/ /오른쪽 아래
}else{
downPw($this," -");//왼쪽 낙하
}
}

//낙하 효과, 즉 불꽃 요소의 X와 Y가 동시에 포물선 느낌을 갖게 되며, 애니메이션 요소
function downPw(odiv,f){
odiv.animate({"top) 완료 후 불꽃을 삭제합니다. ":" =30","left":f "=4"},50,function(){
setTimeout (function(){odiv.remove()},2000);
})
}
})
})
})
})


1. 기능
페이지를 클릭하시면 위와 같은 효과를 보실 수 있습니다.
2. 기능 분석
1. 클릭 시 DIV를 생성하여 본문에 삽입
2. 불꽃놀이는 여러 개의 DIV로 구성되므로 이러한 DIV도 동시에 생성해야 합니다
3 . 각 불꽃의 색상이 다르기 때문에 색상 값을 처리하려면 랜덤 함수가 필요합니다
4. 불꽃의 위치도 다르기 때문에 위치를 처리하려면 랜덤 함수가 필요합니다
5 .폭죽이 서로 다른 방향으로 흩어집니다
6. 불꽃이 떨어지는 느낌입니다
3. 요약:
　3.1. 난수 Math.random()은 0과 1 사이의 숫자입니다. Math.random()에는 임의의 숫자를 곱하고 결과는 0과 승수 사이의 값입니다. Math.random()*9의 값은 0-9 사이의 숫자입니다.
3.12 시작 값을 원하는 경우 0이 아닌 다른 지정된 숫자에 이 숫자를 추가합니다.
　　Math.random()*8 2 결과는 2-10 사이의 숫자입니다.
　3.13 양수와 음수 사이의 숫자를 원하면 승수의 절반을 뺍니다.
　　Math.random()* 8-4, 결과는 4에서 -4 사이의 숫자입니다.

3.2 이동 코어
3.21은 요소의 X 좌표 또는 Y 좌표를 변경하는 것입니다. 현재 페이지 (덧셈, 뺄셈, 곱셈, 나눗셈 등, 연산으로 값이 바뀔 수 있는 한)
3.22 움직이는 것처럼 보이도록 어떻게 바꾸나요?
변경될 때마다 참조 요소의 현재 X 또는 Y 좌표를 참조합니다. (변경될 때마다 이 요소의 좌표가 변경되기 때문에) 따라서 변경된 후에는 항상 현재 요소의 X 또는 Y 좌표값을 구해야 합니다.

3.3 임의의 색상 값
색상 값은 16진수입니다. 그리고 이 값에도 범위가 있으므로 먼저 범위를 가져와야 합니다.
000000-FFFFFF.
그런 다음 십진수 범위로 변환해야 합니다.
0-16777215
이 범위에서는 난수를 사용하여 이 범위 내의 색상 값을 생성할 수 있습니다. 물론, 그래도 마지막에 16진수로 변환해야 하고 색상 값 앞에 "#" 기호를 추가하는 것도 잊지 마세요

3.4 Falling Feeling
실제로는 요소가 포물선 변화를 가지도록 하려면, 즉 요소의 X와 Y 값이 동시에 변경되도록 합니다.

(setTimeout을 사용할 때 잘못된 것을 가리키지 마세요!~~)

온라인 데모:
http://demo.jb51.net/js/2012 / myyanhua/
패키지 다운로드: myyanhua_jb51.rar