この記事では、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整合性制約ステートメントの分析
1. HTML部分 <Col span="2">ファイルをアップロー...
人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...
まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...
必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...
目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...
実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...
導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...
この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...
目次序文1. モナドの判断1.1 例1.2 オブジェクトに入れる1.3 マップに載せる2. 複数の判...
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...
1. 新旧ドメイン名のジャンプ適用シナリオ: ドメイン名ベースのリダイレクト。会社の古いドメイン名は...
<div align="center"> <table sty...
目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...