jsで七夕告白連打の効果を実現、jQueryで連打技術を実現

jsで七夕告白連打の効果を実現、jQueryで連打技術を実現

この記事では、jsとjQueryテクノロジーを使用して告白弾幕を実現する方法を紹介します。具体的な内容は次のとおりです。

js 七夕告白弾幕エフェクト シンプルバージョンエフェクト:

キーコード:

<スクリプト>
        var si;
        関数 tangmu(){
            クリア間隔(si);
            var テキスト = document.getElementById("テキスト");
            var tangmu = document.getElementById("tangmu");
 
            var textStyle="<font id=\"textStyle\">"+text.value+"</font>";
             
            mathHeight = Math.round(Math.random()*tangmu.offsetHeight)+"px";
 
            var textLeft=tangmu.offsetWidth+"px";
             
            tangmu.innerHTML=テキストスタイル;
             
            var textStyleObj = document.getElementById("textStyle");
             
            textStyleObj.style.left=テキスト左;
            textStyleObj.style.top=mathHeight;
             
            var x = parseInt (textStyleObj.style.left);
             
            si = setInterval("xunhuan("+x+")",100);
             
        }
        関数 xunhuan(left){
            var textStyleObj = document.getElementById("textStyle");
            textStyleObj.style.left=左;
             
            var x = parseInt (textStyleObj.style.left);
 
            if(x<textStyleObj.style.width){
                document.getElementById("tangmu").innerHTML="";
                クリア間隔(si);
            }それ以外{
                x = 18;
            }
             
            textStyleObj.style.left=x+"px";
        }
</スクリプト>

jQuery は、弾幕技術を実装します。

効果:

キーコード:

<script src="jquery-1.11.1.js"></script>
<スクリプト>

    $(関数() {
        $(".showBarrage,.s_close").click(関数() {
            $(".barrage,.s_close").toggle("遅い");
        });
        init_barrage();
    })

    //コメントを送信 $(".send .s_btn").click(function () {
        var テキスト = $(".s_text").val();
        if (テキスト == "") {
            戻る;
        }

        var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getRandomColor() + ";'>" + text + "</div>");
        $(".mask").append(_lable.show());
        init_barrage();
    })

    // 弾幕技術を初期化する function init_barrage() {
        var _top = 0;
        $(".mask div").show().each(function() {
                    var _left = $(window).width() - $(this).width(); //ブラウザの最大幅(左の位置の値として) var _height = $(window).height(); //ブラウザの最大の高さ _top += 75;
                    _top >= (_height - 130) の場合 {
                        _トップ = 0;
                    }
                    $(this).css({左: _left, 上: _top, 色: getRandomColor()});

                   // 時間指定のポップアップテキスト var time = 10000;
                    $(this).index() % 2 == 0 の場合
                        時間 = 15000;
                    }

                    $(this).animate({left: "-" + _left + "px"}, time, function () {
                        $(this).remove();
                    });

                }
        );

    }

    //ランダムな色を取得する関数 getRandomColor() {
        '#' + (関数(h) {を返す
                    新しい配列(7 - h.length).join("0") + hを返します
                })((Math.random() * 0x1000000 << 0).toString(16))
    }

</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • シンプルな弾幕演出を実現するjQuery
  • jQuery は弾丸スクリーン効果を実装します
  • ライブ弾幕効果を実現するjQuery
  • jQuery はシンプルな弾丸スクリーン効果を実装します
  • jQuery の弾丸スクリーン効果のシンプルな実装
  • jQuery をベースに Danmu APP を実装する
  • jQuery をベースに弾幕効果を実現する
  • もう一つの素晴らしい弾丸スクリーン効果のjQuery実装
  • ついに実現!素晴らしいjQuery弾幕効果
  • 弾幕効果を実現するためのjQuery

<<:  データベース内のSQL整合性制約ステートメントの分析

>>:  Linuxで相対パスを表現する方法

推薦する

MySQL におけるさまざまな一般的な結合テーブルクエリの例の概要

この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...

Linux ネットワークプログラミング機能の簡単な分析

目次1.ソケットを作成する2. ソケットをバインドする3. 聞き手を作る。聞く4. 接続が受け入れら...

nginx共有メモリの仕組みの詳細な説明

Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...

MySQL 5.7 のインストールと設定のチュートリアル

この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...

MAC で MySQL のデフォルトの文字セットを utf8 に変更する方法

1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...

Pythonは出力をcsv操作に書き込む

以下のように表示されます。 def test_write(self): フィールド=[] field...

Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析

1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...

Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...

ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spre...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

Linux で大きなファイルの内容を消去または削除する 5 つの方法

Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

MySQL ストアド プロシージャの権限の問題の概要

MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...

MySQLパスワード変更例の詳細な説明

MySQLパスワード変更例の詳細な説明長い間 MySQL を使用していませんでした。今日、MySQL...