jQuery動的クラウドタグプラグイン_jquery
jquery
動的
序文:
最近特にjsのプラグインのカプセル化に興味がありますが、現状の技術ではjsを完全にカプセル化するのはまだ難しいので、jQueryをベースに小さなプラグインをカプセル化して開発しました。オブジェクトレベルは追加しません。高度な構文はほとんどありません。オブジェクト インスタンス自体を返す return: foreach() メソッドと、パラメータ オブジェクトのプロパティを拡張する extend() 関数があります。これは、調整後のオブジェクトのチェーン化を容易にするためでもあります。私の方法のタイプの操作。
プラグイン パッケージのダウンロード アドレス: ダウンロードするにはここをクリックしてください
プラグイン名: Dynamic Cloud Tag
プラグインの機能:
指定されたブロックレベル要素内でタグを動的に生成します
ラベルの高さ、幅、位置、レイヤー数、背景色をランダムに制御可能
ラベルがフェードイン/フェードアウトし、初期透明度を変更できます
ラベル作成速度と移動速度を制御可能(タイマー)
ラベル移動のステップサイズ(各サイクルの移動距離)を制御可能
マウスをホバリングすると、アニメーションは最大の透明度および最大のレイヤー数で停止され、マウスを離れると前の状態が復元されます
。
問題が発生しました:
現時点ではプラグインは正常に動作しますが、ブラウザのタブを切り替えるとプラグインのページが表示されず、しばらくしてから切り替えるとラグが発生します。状況について詳しく知っている場合はアドバイスをお願いします。最適化する必要がある領域がたくさんあります。修正できるように提案してください。タイムリーなやり方。
アニメーション効果:
カーン: gif 画像は少し大きいので、しばらくすると動きます。我慢してください
JS コードスニペット:
コードをコピー コードは次のとおりです:
(関数($){
$.fn.activiTag = function(opts) {
opts = $.extend({
move_step:2, // 要素の移動ステップ サイズ --px
move_speed:40, // 要素の移動速度 -- ms
init_speed:1000,//要素の作成速度--ms
min_opacity：0、 max_gran: 10, // 最大粒度
// タグ配列
a_List: ["要素を追加してください","Spring Jpaの詳しい説明","javamailmail"], // タグ文字列配列
// 背景色の配列
Color_list: ['#cd2626', '#8b4513', '#696969', '#ff8c00', '#6495ed'] // タグカラー配列
},opts||{});
var aTag = $(this) // 現在のコンテナ オブジェクト
; var T_width = aTag.width(), T_height = aTag.height() // コンテナの高さ、幅
;
return this.each(function(){
Function settatagcss () {// 対応する CSS を設定します
aTag.css({position:'relative',overflow:'hidden'});
}
function getRandomNum(Min, Max){ // 2 つの間隔内の乱数を取得します
Min = 新しい数値(Min);Max = 新しい数値(Max);
var Range = 最大 - 最小 1;
var Rand = Math.random();
return Min Math.floor(Rand * Range);
}
Function getrandomxy (num) {// 正/負のパラメータをランダムに返します
num = 新しい番号(num); If(Math.random() num = -num;
を返します。 }
/**
* コンテナの幅の 3 分の 1 の幅でタグをランダムに作成し、その後、それ自体に基づいて幅の 5 分の 1 のタグを作成します
* 高さは幅の 3 分の 1、次に - 3 分の 1
*/
function createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]);aTag.append(a);
return a;
}
/**タグのCSSスタイルを設定します **/
function setCss(a) {
var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
var h = Math.ceil(w/3) getRandomXY(w/36); // 行の高さ
var zIndex = Math.ceil(Math.random()*400); var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
// 線の高さ、レイヤー数、透明度
a.css({
opacity:rdmOpcy,
zIndex: zIndex,
lineHeight:h 'px',
位置: '絶対'、
textDecoration:'none',
textAlign:'center',
borderRadius: '3px',
color:'#FFFFFF',
ホワイトスペース: 'nowrap',
});
return a;
}
/**コンテナに対するラベルの初期位置を計算します (X_Y 座標) **/
function setXY(a) {
var x = getRandomNum(0,(T_width-a.width()));
var y = getRandomNum(0,T_height/10);
a.css({left:x 'px',bottom:y 'px'});
return a;
}
/**ランダムな背景色を設定 **/
function setColor(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
}
/**コンストラクターのエントリ **/
関数construct() {
var a = createATag();
setCss(a); setColor(a); // color
setXY(a); return a;
}
/**アニメーションタイマー機能※*/
function interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity') // 透明度
; var botm_ = a.css('bottom').replace('px',''); // リアルタイムの底部距離
; var opcy_ = parseFloat(new Number(a.css('opacity'))) s_opcy; // 透明度
var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --Transparency
var fall = botm_ - botm; // 移動距離
botm_ = 新しい番号(botm_) 新しい番号(opts.move_step);
a.css({
表示: 'ブロック',
下: botm_,
});
If(fall
else if(2*n < fall)
{A.CSS ({OPACITY: _OPCY_})}
If (botm_ >= スペース)
{
a.remove();
}
}
関数 init() {
If(aTag.children('a').length >= new Number(opts.max_gran))
var a =construct();
var opcy = a.css('opacity') // 透明度
; var zInx = a.css('zIndex'); var botm = a.css('bottom').replace('px','') // 底部までの初期距離
; var space = T_height - a.height() - a.css('bottom').replace('px',''); // 移動距離
var n = スペース/3; var step = 1-opcy; var sec = n/opts.move_step*opts.move_speed/1000; // 距離/1 歩の長さ * 1 歩の長さ 秒 = 必要な秒数
var s_opcy = opts.move_speed/1000/sec * step; // 各ループで変換する必要がある透明度の値
varspeed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed) 30);
Var Curropcy; // マウスを動かしたときの透明度を記録します
// console.log(opts.move_speed '....' Speed_)
/**要素移動ループ **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}、speed_)
A.Mouseover (function () {// マウス移動
currOpcy = a.css('opacity');
$(this).css({
zIndex: 401、
不透明度: 1
});
});
a.mouseout(function(){ // マウスアウト
$(this).css({
zIndex: zInx、
不透明度: currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},speed_);
});
}
setATagCss();
setInterval(init,opts.init_speed);
});
}
})(jQuery)
HTML:
コードをコピー
コードは次のとおりです:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
<頭>
云アニメーション态标签生成插件
"type="text/javascript" charset="utf-8">
<スクリプト>
$(関数(){
$('#tag').activiTag({});
});
<スタイル>
#タグ{
境界線:1 ピクセルの破線グレー;
幅:250px;
高さ:250px;
上: 50px;
左: 300px;
}
{
パディング:0px 3px;
font-size:12px;
ホワイトスペース: nowrap;
表示:なし;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
<頭>
"type="text/javascript" charset="utf-8">
<スクリプト>
$(関数(){
$('#tag').activiTag({});
});
<スタイル>
#タグ{
境界線:1 ピクセルの破線グレー;
幅:250px;
高さ:250px;
上: 50px;
左: 300px;
}
{
パディング:0px 3px;
font-size:12px;
ホワイトスペース: nowrap;
表示:なし;
}