弾幕効果は次のとおりです。 誰もが見たことがあると思いますが、その実装の原理と、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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)
>>: Dockerfile をベースに Zabbix 監視システムのコード例を作成する
目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....
<!--[lte IE 6の場合]> <![endif]--> IE6以下で...
MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...
なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...
VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...
環境の準備 Docker環境 MySQL 5.7 (公式イメージはmysql8をサポートしていません...
目次1. トランザクションとは何ですか? 2. トランザクションに関連するステートメントは、挿入、削...
デザイナーは心理学を理解する必要があるデザイナーが知るべき心理学という本は非常に興味深いです。まず、...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...
この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...
この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
コードと例を直接投稿する #テーブル作成時にコメントを記述する CREATE TABLE useri...
序文この記事では主に、シングルクォートやバックスラッシュを含む値を挿入するMySQLステートメントに...
目次MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要1. 遅...