記事では、js を使用して弾幕効果を実現する方法を説明します

<本文>
    <div class="con">
        <div id="スクリーン">
            <div class="dm_show">
                <!-- <div>テキストメッセージ</div> -->
            </div>
        </div>
        <div class="edit">
            <p class="msg">
                <input placeholder="何か言ってください?" class="content" type="text" />
            </p>
            <p class="btns">
                <input type="button" class="send" value="送信" />
                <input type="button" class="clear" value="画面をクリア" />
            </p>
        </div>
    </div>
</本文>

<スタイル>
    .con {
        背景色: 花柄ホワイト;
        パディング: 40px 80px 80px;
    }
 
    #画面{
        背景色: #fff;
        幅: 100%;
        高さ: 380ピクセル;
        境界線: 1px実線rgb(229, 229, 229);
        フォントサイズ: 14px;
    }
 
    。コンテンツ {
        境界線: 1px実線rgb(204, 204, 204);
        境界線の半径: 3px;
        幅: 320ピクセル;
        高さ: 35px;
        フォントサイズ: 14px;
        上マージン: 30px;
    }
 
    。送信 {
        境界線: 1px実線rgb(230, 80, 30);
        色: rgb(230, 80, 0);
        境界線の半径: 3px;
        テキスト配置: 中央;
        パディング: 0;
        高さ: 35px;
        行の高さ: 35px;
        フォントサイズ: 14px;
        幅: 159ピクセル;
        背景色: 白;
    }
 
    。クリア {
        境界線: 1px 実線;
        色: ダークグレー;
        境界線の半径: 3px;
        テキスト配置: 中央;
        パディング: 0;
        高さ: 35px;
        行の高さ: 35px;
        フォントサイズ: 14px;
        幅: 159ピクセル;
        背景色: 白;
    }
 
    。編集 {
        マージン: 20px;
        テキスト配置: 中央;
    }
 
    .edit .btns{
        上マージン: 20px;
    }
 
    .edit .msg 入力{
        左パディング: 5px;
    }
 
    。文章 {
        位置: 絶対;
    }
 
    * {
        マージン: 0;
        パディング: 0;
    }
 
    .dm_show {
        マージン: 30px;
    }
</スタイル>

<スクリプト>
    $(関数() {
        //「送信」ボタンのクリックイベントを設定して、弾丸スクリーンウォールに弾丸スクリーンを表示します$('.send').click(function () {
            //テキスト入力ボックスの内容を取得します。var val = $('.content').val();
            //テキスト ボックスの内容を val に割り当てた後、ユーザーが次回入力できるようにテキスト ボックスの内容をクリアします$('.content').val('');
            //後続の処理のためにテキスト ボックスの内容を div で囲みます var $content = $('<div class="text">' + val + '</div>');
            //箇条書きスクリーンオブジェクトを取得します $screen = $(document.getElementById("screen"));
            //箇条書き画面が表示されるときの上余白を任意の値に設定します var top = Math.random() * $screen.height() + 40;
            //箇条書き画面の上と左の余白を設定します $content.css({
                上: 上 + "px",
                残り: 80
            });
            // 箇条書きスクリーン本体を箇条書きスクリーン ウォールに追加します$('.dm_show').append($content);
            //弾丸画面が左から右に8秒間移動し、その後要素を直接削除します$content.animate({
                左: $screen.width() + 80 - $content.width()
            }, 8000, 関数（）{
                $(this).remove();
            });
        });
        //「画面をクリア」クリックイベントを設定して、弾丸画面ウォール内のすべてのコンテンツをクリアします$('.clear').click(function () {
            $('.dm_show').空();
        });
    });
</スクリプト>