jsを使用してシンプルな弾幕スクリーンシステムを実装する

jsを使用してシンプルな弾幕スクリーンシステムを実装する

この記事では、弾幕効果を実現するためのネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript の弾丸スクリーン効果のシンプルな実装
  • JavaScript ベースで弾幕特殊効果を実現
  • JS で実装したビデオ弾幕スクリーン効果の例
  • JavaScript ライブコメント連発カット画像機能ポイント収集効果コード
  • 弾丸スクリーンの壁効果を実現する JavaScript
  • ビデオの弾幕効果を実現する JavaScript (2 つのバージョン)
  • 弾幕効果を実現するネイティブ js
  • js cavans が静的スクロール弾丸画面を実現
  • ネイティブ JS で弾幕スクリーン効果を実装するための簡単なガイド
  • 弾丸スクリーンの航空機効果を実現する js

<<:  Linux リダイレクトの使用方法の詳細な説明

>>:  MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

推薦する

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...

Zabbixリモートコマンド実行の詳細な例

目次1つ。環境二。予防三つ。例Zabbix トリガーがしきい値に達すると、アラート メッセージの送信...

W3C チュートリアル (9): W3C XPath アクティビティ

XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

nginx 設定場所方法の概要

位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....

オンデマンドで Vue コンポーネントを自動的にインポートする方法

目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...

CocosCreatorメッセージ配信メカニズムの詳細な説明

概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...

MySQL データ型の詳細

目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...

Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...

MySQL 5.7 解凍版のインストールとアンインストール、およびよくある問題の概要

1. インストール1. ダウンロードMySQLをダウンロードするには、MySQL公式サイトhttp:...

ウェブページレイアウトに関する9つのヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...

無料のパブリック STUN サーバー

無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...

JavaScript配列重複排除の詳細な説明

目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...