この記事では、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整合性制約ステートメントの分析
フロートの定義要素を通常のドキュメント フローから外し、要素を左または右に近づけます。親要素の端...
WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...
Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...
関数を記述できます。主に正規表現を使用して判断を行います。入力文字が空の場合は、「-」を使用して置き...
HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...
<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...
始める前にクラウドサーバーを持っています。私のはTencent Cloud Server (Cent...
1. クリアフローティング法1前の親要素の高さを設定します。注: エンタープライズ開発では、可能であ...
まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...
目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...
環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...