jQueryによる花火エフェクト（スポーツ関連） 画面をクリックするとfireworks_jqueryが表示されます

のレンダリング コア コード:

コードのコピー コードは次のとおりです:

$(function(){
$(document).click(function(event){
/*1. DIV を作成し本文に挿入します
*2. 初期値を設定します位置: TOP は画面の高さ、左はマウスをクリックしたときの pageX の値
*/
//Create DIV
var $div = $("

");
var eLeft =event.pageX;
var etop =event.pageY;
var cHeight = document.documentElement.clientHeight;
//色、サイズ、初期化を設定します位置
$div.css({"width":4,"height":15,"background-color":"red","top":cHeight,"left":eLeft}); /ページの本文に挿入 Go;
$("body").append($div);
//スクロール バーはありません
$("body").css(" overflow","hidden");
//DIV を上に移動し、マウスの位置に移動した後、DIV 要素を削除して、花火エフェクトを実行します;
$div.animate({"top ":etop},700,function(){
//DIV を削除
$(this).remove();
/*花火効果
*1. 花火は多くの DIV で構成されています
*2. 花火の色が異なります
*3. 花火の方向も異なります
*5. Feeling
*/
// 花火を表すためにループを使用して多くの DIV を作成します
for(i=0;i$("body").append($( "

"));
}
/*花火の色はランダムで、色の値は16進数で表現されるため、乱数は16 進数と組み合わせた
*16 進数の ffffff の最大値は 16777215;
*Math.random()*16777215 の数式は 10 進数であるため、四捨五入されます。必須;
*Math.ceil(Math.random ()*16777215) は、色の値の範囲内のランダムな 10 進数値を生成します。
*Math.random()*9 1 つの式は 1 ～ 10 の数値を取得できます。など
*。 toString(16) メソッドは、取得した 10 進数をランダムな色の値である 16 進数に変換します。 function changColor(){
sjColor = Math.ceil(Math.random()*16777215).toString(16)//;
//生成されたランダムな色の値が 6 桁未満の場合は、が入力され、その値は変更されないため、この数値の前にゼロを追加します。
while(sjColor.lengthsjColor = "0" sjColor;


//花火のDIV、散布、落下の色と位置を設定します
$(".yh").css({"width":3,"height":3 ,"top": etop,"left":eLeft});
/*花火が散ったら、leftとtopを設定します
*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({"背景色":"#" sjColor, "width":3,"height":3}).
animate({"top":etop-yhY,"left":eLeft-yhX},500);//
for(i) を展開します。 =0;i//マウスをクリックしたときに花火が右か左かを判断します
if(yhXdownPw($this," ");/ /Down right
}else{
downPw($this," -");//Falling left
}
}

//Falling エフェクト、つまり、花火要素の 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. Fireworks は多数の DIV で構成されているため、これらの DIV も同時に作成する必要があります
3 . それぞれの花火の色は異なるため、色の値を処理するにはランダム関数が必要です
4. 花火の位置も異なるため、位置を処理するにはランダム関数も必要です
5 . 花火はさまざまな方向に散ります
6. 花火は落ちているように感じます
3.1. 乱数 Math.random() は 0 から 1 までの数値です。 Math.random() は任意の数値で乗算され、結果は 0 から乗数までの値になります。 Math.random()*9 の値は 0 ～ 9 の数値です。
3.12 開始値を次のようにしたい場合。ゼロではなく、別の指定された数値を追加します。
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
次に、10 進数の範囲に変換する必要があります
0-16777215
この範囲では、乱数を使用してこの範囲内の色の値を生成できます。もちろん、最終的には 16 進数に変換する必要があり、色の値の前に「#」記号を追加することを忘れないでください

3.4 落ちる感じ
実際には、要素に放物線状の変化を持たせる、つまり要素の X と Y の値を同時に変化させます。

(setTimeout を使用するときは、これを間違ったものに指定しないでください!~~)

オンライン デモ:
http://demo.jb51.net/js/2012 / myyanhua/

パッケージのダウンロード: myyanhua_jb51.rar