この記事では、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整合性制約ステートメントの分析
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...
目次推測する事例:理解を深める参照する後で忘れないように、キーワード infer をメモしておきます...
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
トリガーの紹介トリガーは、テーブルに関連付けられた特別なストアド プロシージャであり、テーブル内のデ...
前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...
1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...
長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...
以前、純粋な CSS を使用して波の効果を実現する方法をいくつか紹介しました。それらについては、次の...
mysql-8.0.12-winx64 解凍版のインストールを記録して、みんなで共有しました。 1....
背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...
1. COUNT(*) と COUNT(COL) COUNT(*)は通常、主キーに対してインデックス...
目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...
展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....
easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...