この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: データベース内のSQL整合性制約ステートメントの分析
この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...
目次1.ソケットを作成する2. ソケットをバインドする3. 聞き手を作る。聞く4. 接続が受け入れら...
Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...
この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...
1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...
以下のように表示されます。 def test_write(self): フィールド=[] field...
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...
この記事では、reduce()、filter()、map()、every()、some()、spre...
Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...
前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...
Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...
成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...
MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...
MySQLパスワード変更例の詳細な説明長い間 MySQL を使用していませんでした。今日、MySQL...