弾幕効果は次のとおりです。 誰もが見たことがあると思いますが、その実装の原理と、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 監視システムのコード例を作成する
今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...
目次ガベージコレクション (GC) はなぜ必要なのでしょうか?ガベージコレクションとは廃棄物の発生ガ...
KILL [接続 | クエリ] processlist_id MySQL では、各接続は個別のスレ...
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...
DNS(ドメインネームサーバー)は、ドメイン名とそれに対応する IP アドレスを変換するサーバーです...
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
フォームは、get と post の 2 つのデータ転送方法を提供します。どちらもデータを送信する方...
この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...
ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...
序文ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場...
効果 html <本文> <div class="content&quo...
ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...
1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...
この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...