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

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

弾幕効果は次のとおりです。

弾幕効果

誰もが見たことがあると思いますが、その実装の原理と、Web テクノロジーを使用してフロントエンドに実装する方法は何でしょうか。 ?

新しい HTML ファイルを作成します。

ハハハハ、私のように中国語で名前を付けないでください。

中国語の命名は標準に準拠していません。あなたが世界に出て行くとき、偉い人たちはあなたの中国語の命名を見てあなたを笑うでしょう。

上の画像では、jquery プラグインを導入しました。はい、jq で記述して元に戻しました (CDN リンクが見つからない場合は、Baidu bootcdn で jquery を検索してください)。そして、弾幕のウェブサイトからタイトルを付けました。

初期テンプレートを作成する

ここで言及しておかなければならないのは、フロントエンド開発者には開発に vscode を使用することをお勧めします。非常に使いやすいからです。

ちょっとしたコツ: 空のHTMLファイルを入力してください。HTMLテンプレートが自動的に初期化されます。

テンプレートが作成され、jQuery が導入された後、メイン テキストが始まります。

HTML の追加

<本文>
    <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>
</本文>

シンプルな HTML。

CSS を書いてみましょう:

CSS パディング

<スタイル>
    .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;
    }
</スタイル>

効果をご覧ください:

全体的な構造が明らかになりました。以下は真の 28 の古典の js です。

js ロジックコード

<スクリプト>
    $(関数() {
        //「送信」ボタンのクリックイベントを設定して、弾丸スクリーンウォールに弾丸スクリーンを表示します$('.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').空();
        });
    });
</スクリプト>

サプライズですか?ほんの数行です、ハハハハ。

コメントは非常に詳細なので、よく見てください。ここでデモをお見せします。

アニメーション効果

画質が悪いのはご容赦ください。でも、鑑賞効果には影響しません。ここでは、エンタープライズレベルのアプリケーションには及ばない弾幕効果を単純に実装しただけです。必要であれば、自分で改善してください。それが理由です、笑。

エンタープライズ レベルのビデオ 弾幕が必要な場合は、非常に完璧なプレーヤーである dplayer プレーヤーもお勧めします。

これでフロントエンドの弾幕に関する説明はほぼ終わりです。上記は、js を使用して弾幕効果を実装する方法を詳しく説明した記事です。弾幕を実装するための js の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 弾幕効果を実現するネイティブ js
  • JavaScript の弾丸スクリーン効果のシンプルな実装
  • JavaScript ベースで弾幕特殊効果を実現
  • 弾丸スクリーンの壁効果を実現する JavaScript

<<:  MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

>>:  Dockerfile をベースに Zabbix 監視システムのコード例を作成する

推薦する

ブリージングカルーセルを実装するネイティブJS

今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...

JavaScript のガベージコレクションの仕組みの詳細な説明

目次ガベージコレクション (GC) はなぜ必要なのでしょうか?ガベージコレクションとは廃棄物の発生ガ...

MySQL kill コマンドの使用ガイド

KILL [接続 | クエリ] processlist_id MySQL では、各接続は個別のスレ...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...

バインドを使用してDNSサーバーを設定する方法

DNS(ドメインネームサーバー)は、ドメイン名とそれに対応する IP アドレスを変換するサーバーです...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

フォームのmethod=post/getの違い

フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...

IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...

CSSはボックスコンテナ(div)の高さを常に100%に設定します。

序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...