記事では、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 監視システムのコード例を作成する

推薦する

Docker で Maven プロジェクトをより速くビルドする

目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...

docker に nacos をインストールしてデータベースを構成する詳細なチュートリアル

環境の準備 Docker環境 MySQL 5.7 (公式イメージはmysql8をサポートしていません...

MySQL データベース トランザクション例のチュートリアル

目次1. トランザクションとは何ですか? 2. トランザクションに関連するステートメントは、挿入、削...

インタラクションデザインと心理学の驚くべきつながり18選

デザイナーは心理学を理解する必要があるデザイナーが知るべき心理学という本は非常に興味深いです。まず、...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

jsネイティブカルーセルプラグインの制作

この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...

シンプルな画像ドラッグ効果を実現する js

この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

MySQLでテーブルを作成し、フィールドコメントを追加する方法

コードと例を直接投稿する #テーブル作成時にコメントを記述する CREATE TABLE useri...

MySQL ステートメントに一重引用符またはバックスラッシュを含む値を挿入する方法

序文この記事では主に、シングルクォートやバックスラッシュを含む値を挿入するMySQLステートメントに...

MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要

目次MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要1. 遅...