Baru-baru ini, saya amat berminat dengan enkapsulasi pemalam js Dengan teknologi semasa, masih sukar untuk merangkum js sepenuhnya, jadi saya merangkumkan pemalam kecil berdasarkan jQuery, dan ia dibangunkan berdasarkan. tahap objek. Tidak menambah kaedah global. Hampir tiada sintaks lanjutan Terdapat kaedah pengembalian: foreach() untuk mengembalikan contoh objek itu sendiri, dan fungsi extend() untuk memanjangkan sifat objek parameter Ini juga untuk memudahkan perangkaian objek selepas pelarasan operasi jenis kaedah saya.
Pada masa ini, pemalam boleh berjalan seperti biasa, tetapi jika anda menukar tab penyemak imbas dan halaman pemalam tidak dipaparkan, dan kemudian menukar kembali selepas beberapa ketika, saya tidak tahu apakah keadaannya. Sila beri saya nasihat jika anda mengetahui lebih lanjut mengenainya, terdapat banyak bidang yang perlu dioptimumkan.
Khan: Imej gif mungkin agak besar dan akan bergerak selepas beberapa ketika. Sabar
(fungsi($){
$.fn.activiTag = fungsi(pilihan) {
opts = $.extend({
move_step:2, // saiz langkah pergerakan elemen--px
move_speed:40, // Kelajuan pergerakan elemen--ms
init_speed:1000,//Kelajuan penciptaan elemen--ms
min_opacity:0,
max_grain: 10, // Saiz butiran maksimum
// Tatasusunan label >
a_Senarai: ["
Sila tambah elemen","
Penjelasan terperinci Spring Jpa","
javamailmail"], // tatasusunan rentetan teg
// Tatasusunan warna latar belakang
color_list: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED'] ;
},pilihan||{});
var aTag = $(this); // Objek bekas semasa
var T_width = aTag.width(), T_height = aTag.height(); // Tinggi bekas, lebar
kembalikan ini.setiap(fungsi(){
Fungsi settatagcss () {// Tetapkan CSS yang sepadan
aTag.css({kedudukan:'relatif',limpahan:'tersembunyi'});
}
fungsi getRandomNum(Min, Maks){ // Dapatkan nombor rawak dalam dua selang
Min = Nombor baharu(Min);Maks = Nombor baharu(Maks);
var Julat = Maks - Min 1;
var Rand = Math.random();
kembalikan Min Math.floor(Rand * Julat);
}
Fungsi getrandomxy (num) {// Kembalikan parameter positif/negatif secara rawak
nombor = Nombor (bilangan) baharu;
Jika(Math.random()<=0.5)
num = -num;
nombor pemulangan
}
/**
* Buat teg secara rawak dengan lebar satu pertiga daripada lebar bekas, dan kemudian berdasarkan sendiri - satu perlima daripada lebar
* Tinggi ialah satu pertiga daripada lebarnya sendiri, kemudian - satu pertiga
*/
fungsi createATag() {
var i = getRandomNum(0,opts.a_List.length-1);
var a = $(opts.a_List[i]); aTag.append(a);
kembalikan a;
}
/**Tetapkan gaya css tag **/
set fungsiCss(a) {
var w = Math.ceil(T_width/3) getRandomXY(T_width/60);
var h = Math.ceil(w/3) getRandomXY(w/36); // Tinggi baris
var zIndex = Math.ceil(Math.random()*400);
var rdmOpcy = getRandomNum(Nombor baharu(opts.min_opacity),0);
// Ketinggian garisan, bilangan lapisan, ketelusan
a.css({
kelegapan:rdmOpcy,
zIndex: zIndex,
garisKetinggian:h 'px',
kedudukan: 'mutlak',
teksHiasan: 'tiada',
teksSejajar:'tengah',
sempadanRadius: '3px',
warna:'#FFFFFF',
whiteSpace: 'nowrap',
});
kembalikan a;
}
/**Kira kedudukan awal label berbanding bekas (koordinat X_Y) **/
set fungsiXY(a) {
var x = getRandomNum(0,(T_width-a.width()));
var y = getRandomNum(0,T_height/10);
a.css({kiri:x 'px', bawah:y 'px'});
kembalikan a;
}
/**Tetapkan warna latar belakang rawak **/
set fungsiWarna(a) {
var i = Math.ceil(Math.random()*opts.color_List.length -1);
a.css({backgroundColor:opts.color_List[i]})
}
/**Kemasukan pembina **/
binaan fungsi() {
var a = createATag();
setCss(a);
setWarna(a);
setXY(a);
kembalikan a;
}
/**Fungsi pemasa animasi **/
fungsi interVal(a,s_opcy,botm,n,space,s) {
var opcy = a.css('opacity'); // Ketelusan
var botm_ = a.css('bottom').replace('px',''); // Jarak bawah masa nyata
var opcy_ = parseFloat(Nombor baharu(a.css('opacity'))) s_opcy; // Transparency
var _opcy_ = parseFloat(Nombor baharu(a.css('opacity'))) - s_opcy; // --Transparency
var jatuh = botm_ - botm; // Jarak dialihkan
botm_ = Nombor baharu(botm_) Nombor baharu(opts.move_step);
a.css({
paparan: 'sekat',
bawah: botm_,
});
Jika(jatuh < n)
{A.CSS ({OPACITY: Opcy_})}
jika tidak (2*n < jatuh)
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Jika (botm_ >= ruang)
{
a.remove();
}
}
fungsi init() {
If(aTag.children('a').length >= new Number(opts.max_grain))
kembali;
var a = bina();
var opcy = a.css('opacity'); // Ketelusan
var zInx = a.css('zIndex');
var botm = a.css('bottom').replace('px',''); // Jarak awal ke bawah
var space = T_height - a.height() - a.css('bottom').replace('px',''); // Jarak untuk bergerak
var n = ruang/3;
var step = 1-opcy;
var sec = n/opts.move_step*opts.move_speed/1000; // Jarak/panjang satu langkah * satu langkah panjang saat = bilangan saat diperlukan
var s_opcy = opts.move_speed/1000/sec * step; // Nilai ketelusan yang perlu diubah dalam setiap gelung
var speed_ = getRandomNum(Nombor baharu(opts.move_speed)-30,Nombor baharu(opts.move_speed) 30);
Var Curropcy; // Rakam ketelusan apabila tetikus dialihkan
// console.log(opts.move_speed '....' speed_)
/**Gelung pergerakan elemen **/
var s = setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
}, kelajuan_)
A. mouseover (fungsi () {// tetikus bergerak
currOpcy = a.css('opacity');
$(this).css({
zIndeks: 401,
Kelegapan: 1
});
});
a.mouseout(function(){ // Mouse out
$(this).css({
zIndeks: zInx,
Kelegapan: currOpcy
});
s= setInterval(function(){
interVal(a,s_opcy,botm,n,space,s);
},kelajuan_);
});
}
setATagCss();
setInterval(init,opts.init_speed);
});
}
})(jQuery)
HTML:
