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で相対パスを表現する方法

推薦する

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分 <Col span="2">ファイルをアップロー...

Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法

人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...

ウェブフォーム送信方法の詳細な概要

まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します

実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...

Vueコンポーネントの基本のまとめ

コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...

JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...

Vueカスタムツリーコントロールの使い方の詳細な説明

この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...

JavaScript で判決文をエレガントに記述する例

目次序文1. モナドの判断1.1 例1.2 オブジェクトに入れる1.3 マップに載せる2. 複数の判...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

nginx での書き換えジャンプの実装

1. 新旧ドメイン名のジャンプ適用シナリオ: ドメイン名ベースのリダイレクト。会社の古いドメイン名は...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...