最近特にjsのプラグインのカプセル化に興味がありますが、現状の技術ではjsを完全にカプセル化するのはまだ難しいので、jQueryをベースに小さなプラグインをカプセル化して開発しました。オブジェクトレベルは追加しません。高度な構文はほとんどありません。オブジェクト インスタンス自体を返す return: foreach() メソッドと、パラメータ オブジェクトのプロパティを拡張する extend() 関数があります。これは、調整後のオブジェクトのチェーン化を容易にするためでもあります。私の方法のタイプの操作。
現時点ではプラグインは正常に動作しますが、ブラウザのタブを切り替えるとプラグインのページが表示されず、しばらくしてから切り替えるとラグが発生します。状況について詳しく知っている場合はアドバイスをお願いします。最適化する必要がある領域がたくさんあります。修正できるように提案してください。タイムリーなやり方。
(関数($){
$.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
{A.CSS ({OPACITY: OPCY_})}
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:
