jsが花火の効果を実現します

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
        #container { 
            幅： 80％; 
            高さ：600PX。
            ボーダー：2ピクセル固体赤。
            背景：＃ 000 ; 
            マージン：20ピクセルオート; 
            カーソル：ポインタ; 
            位置：相対; 
            左： 0 ; 
            トップ： 0 ; 
            オーバーフロー：隠されました; 
        } 
        .fire { 
            幅：10pxの。
            位置：絶対; 
            下： 0 ; 
        } 
        .small - 火災{ 
            幅：10pxの。
            高さ：10pxの; 
            位置：絶対; 
            ボーダー -radius：50％; 
        }
     </スタイル> 
</ HEAD> 
<BODY> 
    の<divのid = "コンテナ"> </ div> 
</ BODY> 
<スクリプトSRC = "../ move.js"> </ SCRIPT> 
<SCRIPT> 関数火災（オプション）{
         この .X = options.x。
        この .Y = options.y。
        これ。

    

        // 1、ボディ花火、スタイリングを作成位置決め
        この.INIT（）
    } 
    Fire.prototype.init = 関数（）{
         // 本体花火、スタイリングを、位置決め
        この .ele =のdocument.createElement（ "DIV" ）。
         この .ele.className = "火" ;
         この .ele.style.left = この .X + "PX" ;
         この .ele.style.background = randomcolor（）;
         この .cont.appendChild（この.ele）

        // 終了運動を開始する。2. 
        この.animateを（）
    } 
    Fire.prototype.animate =関数（）{
         // 動き始めます。。。
        移動（この.ele、{ 
            トップ：この.Y 
        }、関数（）{
             // メイン花火を削除し
            、この（.ele.remove）を
             // 3.小さな花火を作成し
            、この.createSmall（）
        } .bind（本））
    } 
    Fire.prototype.createSmall = 関数（）{
         // 小花火、移動、削除作成
        するvarランダムNUM =（10,20 ）; 

        // 1.ランダム半径
        のvar（100,200ランダムR＆LT = ）。
        console.log（NUM）
        のための（VAR i = 0; I <NUM; iは++ ）{ 
            せDIV =のdocument.createElement（ "DIV" ）。
            div.classNameは =「小さな火」。
            div.style.background = randomColor（）。
            div.style.left = この .X + "PX" 。
            div.style.top = この .Y + "PX" 。
            div.setAttribute（ "I" 、I）;
            この.cont.appendChild（DIV）。

            // 2。
            
            VaRの L =のparseInt（Math.cos（にMath.PI / 180 *（360 / NUM * I））* R）+ この.X。
            VAR T =のparseInt（Math.sin（にMath.PI / 180 *（360 / NUM * I））* R）+ この.Y。

            移動（DIV、{ 
                左：L、
                トップ：T 
            }、関数（）{ 
                div.remove（）
            }）
            
        } 
    } 



    // 用（）{ 
    //      アリ[I] = iは
    //      アリ[i]が.onclick =関数（）{ 
    //          この
    //      } 
    // } 



// 范围随机数
関数ランダム（MAX、MIN）{
     返す恐らくMath.round（Math.random（）*（最大-最小）+ 分）。
} 

// 随机颜色
機能randomColor（）{
     戻り "RGB（"ランダム+ " "（0255）+ +ランダム（0255）+"、 "+ランダム（0255）+"）" 。
} 


    VAR ocont =のdocument.getElementById（ "コンテナ" ）。
    ocont.onclick = 関数（イブ）{
         VARの E =前夜|| window.event;
        新しいファイア（{ 
            X：e.offsetX、
            Y：e.offsetY、
            親：この
        }）。
    }

 </ SCRIPT> 
<

//移动
関数移動（ELE、JSON、コールバック）{ 
    てclearInterval（ele.t）。
    ele.t =たsetInterval（（）=> {
         VAR ONOFF = 真;
         のための（VAR I でJSON）{
             VAR iNow = のparseInt（でgetStyle（ELE、I））;
             VAR速度=（JSON [I] - iNow）/ 6 ; 
            速度=速度<0？Math.floor（速度）：Math.ceil（速度）
             であれば（！iNow = JSON [I]）{ 
                ONOFF = 偽; 
            } 
            ele.style [I]= iNow +速度+ "PX" 。
        } 
        であれば（ONOFF）{ 
            てclearInterval（ele.t）。
            コールバック && コールバック（）。
        } 
    }、 30 ）; 
} 
関数でgetStyle（ELE、ATTR）{
     場合（ele.currentStyle）{
         戻りele.currentStyleを[ATTR]。
    } 他{
         返す（ELE getComputedStyleを偽）ATTR]。
    } 
}

jsが花火の効果を実現します

おすすめ