この記事では、弾幕効果を実現するためのネイティブ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 無料インストール版 設定方法 グラフィックチュートリアル
目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...
目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...
目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...
目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...
一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...