弾幕の模造効果

レンダリング
<！DOCTYPE HTML > 
< HTML のlang = "EN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、最小スケール= 1.0、最大規模= 1.0、ユーザースケーラブル=なし」> 
    < タイトル>仿弹幕效果</ タイトル> 
    < スタイル> 
    * { マージン：0 ; パディング：0 ; リストスタイル：なし。}    
    HTML、本体{ 幅：100％ 。高さ：100％; } 
    体{ 背景色：＃000 。フォントファミリ：'微软雅黑' ; } 
    #danmu { 位置：相対。高さ：100％; 幅：100％; オーバーフロー：隠されました; フォントサイズ：14px ; 背景：URL（IMG / bg.png）ノー・リピートセンター;背景サイズ：カバー; } 
    #danmu .newli { 背景色：＃000 。高さ：30px ; 行の高さ：30px ; 位置：絶対; オーバーフロー：隠されました; 色：#FFF ; } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
    < div要素のid = "danmu" > </ divの> 
    < スクリプト>
        VAR danmu = のdocument.getElementById（' danmu ' ）;
         VAR WINH = danmu.clientHeight;
         VAR 話す= [ ' 'うわ良いNiubiああ' ' 、' 'ハンサムああ' ' 、' '、高エネルギーの前に' ' 、' ' 「HAHAHAHAHA 『』『ハッハッハ』『』『』上品『』『私は』あああああああああなたを愛して『』ハッハッハ『』」];
         機能インサート（）{
             VAR newli = のdocument.createElement（' DIV ' ）。
            VaRのrandomS = Math.floor（Math.random（）* 8 ）。
            VaRのR = Math.floor（Math.random（）* 266 ）。
            VaRのG = Math.floor（Math.random（）* 266 ）。
            VaRのB = Math.floor（Math.random（）* 266 ）; 
            newli.innerHTML = [randomS]を話します。
            newli.className =' newli ' ; 
            newli.style.color = ' RGB（' + R + ' ' + G + ' ' + B + ' ）' 。
            するvar T = WINH - 30 。
            VAR newliT = Math.floor（Math.random（）* （T - 1 ））。
            VAR newliL = danmu.clientWidth。 
            newli.style.left = newliL + ' ピクセル' 。
            newli.style.top = newliT + ' ピクセル' 。
            danmu.appendChild（newli）。
            ムーブ（newli）。
        } 
        関数移動（OBJ）{
             VAR タイマ1 = のsetInterval（関数（）{
                 VAR newliW = obj.clientWidth;
                 VARのラン= obj.offsetLeft; 
                実行- ;
                 なら（ラン<= - newliW）{ 
                    danmu.removeChild（OBJ）。
                    clearInterval（タイマ1）。
                } 
                obj.style.left = ラン+ ' ピクセル' ; 
            }、10 ）
         } 
        （）を挿入します。
        VAR タイマ2 = のsetInterval（関数（）{ 
            インサート（）; 
        }、500 ）。
    </ スクリプト> 
</ ボディ> 
</ HTML >
おすすめ
