1. 基本原則まず、生放送エリアを10の部分に分割し(個人的には計算の便宜上10に分割しています)、入力コンテンツを10の分割領域にランダムに配置し、10の分割領域の右側のビューの外側に挿入してから、ランダムな速度で右から左に移動するアニメーションを呼び出します。左側の領域のビューの外側に移動すると、このスクロール要素を削除します。 2. 特定のコード<div class="move_video_content"> <div class="video_content"> <div class="video_div" id="video_view"></div> <div class="scroll_content"> <ul class="scroll_ul" id="scroll_ul_id"></ul> </div> </div> <div class="input_content"> <input type="text" class="input_text" maxlength="30" placeholder="送信したい弾幕を入力してください" id="input_text_id"> <button type="button" class="button_btn" id="send_btn">送信</button> </div> </div> 具体的な効果は以下のとおりです。 jsコードは次のとおりです let inputText = document.getElementById("input_text_id");//入力ボックスlet scrollContent = document.getElementById("scroll_ul_id");//サイドチャットバーlet videoView = document.getElementById("video_view");//ビデオエリアlet videoWidth = videoView.offsetWidth;//ライブ放送エリアの合計幅let listHeight = videoView.offsetHeight/10;//ライブ放送エリアの各レイヤーの高さlet listTopNum = [0,1,2,3,4,5,6,7,8,9];//ライブ放送エリアの高さを10のレイヤーに分割document.getElementById("send_btn").addEventListener("click",function(){//送信ボタンをリッスンlet value = inputText.value;//入力ボックスの値を取得if(!value) return; appendDom(value); //入力ボックスの値をスクロールチャットに挿入します createVideoBulletChatDom(value); //入力ボックスの値を箇条書き画面に挿入します inputText.value = ''; //入力ボックスをクリアします scrollContent.scrollTop = scrollContent.scrollHeight; //自動的に一番下までスクロールします }) function appendDom(value){//入力ボックスの値をスクロールチャットに挿入します。let li = document.createElement("li"); li.setAttribute("class","scroll_li"); li.innerHTML = 値; scrollContent.appendChild(li); } speedArr = ['normal','fast','faster'] とします。 function createVideoBulletChatDom(value){//入力ボックスの値を箇条書き画面に挿入します。let num = listTopNum[Math.floor((Math.random()*listTopNum.length))]; p = document.createElement("p"); とします。 p.setAttribute("class","video_p"); p.style.top = (num * 60) + "px"; p.style.left = ビデオ幅 + "px"; p.innerHTML = 値; ビデオビューに子要素を追加します。 speed = speedArr[Math.floor((Math.random()*speedArr.length))] とします。 Animate(p,speed); //スクロールアニメーション} animateType = { '通常':5, '速い':10, 'より速い':15 } function Animate(dom,speed){//スクロールアニメーション let domWidth = dom.offsetWidth;//現在の弾丸画面要素の幅 let distance = videoWidth;//ライブ放送領域の合計幅 speed ? speed : 'normal'; 間隔をanimateType[速度]とします タイマー = setInterval(function(){ 距離 -= 間隔; dom.style.left = 距離 + 'px'; if(距離 <= -domWidth){ タイマーの間隔をクリアします。 videoView.removeChild(dom); //画面からスクロールアウトしたラベルをクリアします} },50) } ライブ放送エリアを10個の部分に分割(listTopNum)に応じて、各レイヤーの高さ(listHeight)を取得し、スクロールラベルの上部を変更して、10個の部分の異なる領域に挿入します。 スクロール ラベルを作成すると、スクロール アニメーション (関数 Animate) が作成されます。デフォルトの速度は normal です。アニメーションを作成するたびに、ランダムな速度タイプ (normal、fast、faster) がランダムに渡されます。スクロールごとに減算される距離は、渡された速度タイプに応じて変更され、異なるスクロール速度を実現します。 要約する暇な時に思いつきで書いたライブスクロールアニメーションです。WebSocket を追加すれば複数人同期通信も実現できます。暇な時に後日改良します。 具体的なコードについては[:github.com/liqc-wwl/bu…]にアクセスしてダウンロードし、効果を直接確認してください。 ネイティブ js を使用してライブ弾幕のスクロール効果をシミュレートする方法についての記事はこれで終わりです。ライブ弾幕スクロール コンテンツのより関連性の高い js シミュレーションについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerを使用してPythonランタイム環境の基本イメージを作成する方法
>>: MySQLテーブルシャーディングとパーティショニングの具体的な実装方法
設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...
目次概要オブザーバーパターンの応用シナリオオブザーバーパターンの実装要約する概要オブザーバー パター...
実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...
以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...
効果現在、プロジェクトは2つ(project1、project2)あり、nginxに付属するinde...
目次1. 日付2. 正規表現3. オリジナルパッケージタイプ序文:参照値(オブジェクト)は、 Dat...
序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...
結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...
この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...
1.まずAlibaba Cloudのウェブサイトにログインしてアカウントを登録し、サーバータイプを...
序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
まずは効果を見てみましょう:この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花...