この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 実装のアイデア1. 静的ページのフレームワークを最初に記述する <div id='父'> <div id="top"> <video src="./video/s10_2020129112346.mp4" 自動再生ミュートループをコントロールします></video> <!-- コントロールは標準のビデオ コントロールを表示します。自動再生ビデオが自動的に再生されます (muted 属性が設定されている場合にのみ自動的に再生されます) ミュート 無音再生 ループ ループ再生 --> </div> <div id="下"> <入力タイプ="テキスト" id="txt"> <input type="button" id="btn" value="送信"> </div> </div> 2. シンプルなCSSコードを追加してページをより美しくする *{ /*ページの初期化*/ マージン: 0; パディング: 0; } 体{ 背景色: バーリーウッド; } #父親{ 幅: 800ピクセル; 高さ: 550px; マージン: 50px 自動; } #トップ{ 幅: 800ピクセル; 高さ: 500px; } ビデオ{ 幅: 800ピクセル; 高さ: 500px; } #底{ 幅: 800ピクセル; 高さ: 50px; 背景色: #000; テキスト配置: 中央; 行の高さ: 50px; } このような単純な静的ページが完成し、残りは JS コードを記述するだけです。 3. 後で使用するためにいくつかの関数をカプセル化しましょう。 //ランダムに色を生成する関数 rgb () { r = Math.floor(Math.random() * 256); とします。 g = Math.floor(Math.random() * 256); とします。 b = Math.floor(Math.random() * 256) とします。 'rgb('+r+','+g+','+b+')' を返します } //指定された範囲の整数データを生成する function stochastic(max,min){ Math.floor(Math.random()*(max-min)+min) を返します。 } 送信する箇条書きコメントはspanタグ内に配置されます。ここでは、span を#topに配置するために位置指定を使用する必要があります (son と father は同じ位置にあります) //<div id='#top'></div> に span タグを追加します。function barrage(){ span = document.createElement("span"); とします。 span.innerHTML = txt.値; span.style.color = rgb(); //箇条書きの色 span.style.fontSize = stochastic(50,12) + 'px'; //フォントサイズ span.style.top = stochastic(420,0) + 'px'; //位置 let right = -2000 span.style.right = right + 'px' //右からの距離 tops.appendChild(span); //<div id='#top'></div> に span タグを追加 //タイマーを使用して弾幕画面の動きを実現 let tiem = setInterval(()=>{ 右++; span.style.right = 右 + 'px' if( 右 > 800 ) { tops.removeChild(span); //弾幕画面が動画から外れたら、要素を直接破棄する clearInterval(tiem); //タイマーをオフにする} },10)//速度が遅すぎると思われる場合は、ここで調整できます} 4.関数がカプセル化されたので、次のように呼び出します。 btn = document.getElementById('btn'); とします。 //ボタンにクリックイベントを追加します btn.onclick = ()=>{ if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。 txt.value = ''; // 入力ボックスをクリアします} //キーボードリスニングイベント(Enter)を追加する document.addEventListener('keydown', 関数(e) { (e.keyCode == 13)の場合{ if(txt.value=='') 戻り値: 弾幕(); txt.値 = ''; } }); 最後に、すべてのコードを添付します。お役に立てば幸いです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>js 弾幕効果</title> <スタイル> *{ マージン: 0; パディング: 0; } 体{ 背景色: バーリーウッド; } #父親{ 幅: 800ピクセル; 高さ: 550px; マージン: 50px 自動; } #トップ{ 幅: 800ピクセル; 高さ: 500px; 位置: 相対的; overflow:hidden; /*オーバーフロー非表示*/ } ビデオ{ 幅: 800ピクセル; 高さ: 500px; object-fit:fill; /*指定されたコンテナの高さと幅に適応します*/ } #底{ 幅: 800ピクセル; 高さ: 50px; 背景色: #000; テキスト配置: 中央; 行の高さ: 50px; } スパン{ 位置: 絶対; 右: 0; トップ:0; } </スタイル> </head> <本文> <div id='父'> <div id="top"> <video src="./video/s10_2020129112346.mp4" 自動再生ミュートループをコントロールします></video> </div> <div id="下"> <入力タイプ="テキスト" id="txt"> <input type="button" id="btn" value="送信"> </div> </div> <スクリプト> txt = document.getElementById('txt') とします。 btn = document.getElementById('btn'); とします。 tops = document.getElementById('top'); とします。 //ボタンにクリックイベントを追加します btn.onclick = ()=>{ if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。 txt.value = ''; // 入力ボックスをクリアします} //キーボードリスニングイベント(Enter)を追加する document.addEventListener('keydown', 関数(e) { (e.keyCode == 13)の場合{ if(txt.value=='') return; // ユーザー入力が空の場合は、直接 barrage() に戻ります。 txt.value = ''; // 入力ボックスをクリアします} }); //ランダムに色を生成する関数 rgb () { r = Math.floor(Math.random() * 256); とします。 g = Math.floor(Math.random() * 256); とします。 b = Math.floor(Math.random() * 256) とします。 'rgb('+r+','+g+','+b+')' を返します } //指定された範囲の整数データを生成する function stochastic(max,min){ Math.floor(Math.random()*(max-min)+min) を返します。 } //<div id='#top'></div> に span タグを追加します。function barrage(){ span = document.createElement("span"); とします。 span.innerHTML = txt.値; span.style.color = rgb(); span.style.fontSize = stochastic(50,12) + 'px'; span.style.top = stochastic(420,0) + 'px'; span.style.right = -200 + 'px'; トップス.appendChild(span); 右を -200 にします。 間隔をsetInterval(()=>{とする 右++; span.style.right = 右 + 'px' if( 右 > 800 ) { tops.removeChild(span); //弾幕画面が動画から外れたら要素を破棄する clearInterval(tiem); //タイマーをオフにする} },10)//速度が遅すぎると思われる場合は、ここで調整できます} </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル
この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...
目次1つ。環境二。予防三つ。例Zabbix トリガーがしきい値に達すると、アラート メッセージの送信...
XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...
目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...
位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....
目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...
概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...
目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...
について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...
1. インストール1. ダウンロードMySQLをダウンロードするには、MySQL公式サイトhttp:...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...
無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...
目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...
この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
この記事では、例を使用して、MySQL イベントの変更 (ALTER EVENT)、イベントの無効化...