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

推薦する

HTML フォームタグチュートリアル (4):

ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

Typescript での infer キーワードの使用に関する詳細な理解

目次推測する事例:理解を深める参照する後で忘れないように、キーワード infer をメモしておきます...

Vue3.0 手書き拡大鏡効果

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

MySQL でのトリガーとカーソルの紹介と使用

トリガーの紹介トリガーは、テーブルに関連付けられた特別なストアド プロシージャであり、テーブル内のデ...

Vue.jsはアイコンをクリックしてズームインし、

前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

MySQL でデータを削除してもテーブル ファイルのサイズが変更されないのはなぜですか?

長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...

CSS で波の効果を作成するためのアイデア

以前、純粋な CSS を使用して波の効果を実現する方法をいくつか紹介しました。それらについては、次の...

MySQL 8.0.12 winx64 解凍バージョンのインストール グラフィック チュートリアル

mysql-8.0.12-winx64 解凍版のインストールを記録して、みんなで共有しました。 1....

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...

MySQL 最適化の概要 - クエリエントリの合計数

1. COUNT(*) と COUNT(COL) COUNT(*)は通常、主キーに対してインデックス...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...