Rumah > Artikel > hujung hadapan web > jQuery teg awan dinamik plug-in_jquery
jQuery teg awan dinamik plug-in_jquery
- WBOYasal
- 2016-05-16 16:31:401496semak imbas
Kata Pengantar:
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.
Alamat muat turun pakej pemalam: Klik di sini untuk memuat turun
Nama pemalam: Dynamic Cloud Tag
Ciri pemalam:
Jana teg secara dinamik dalam elemen peringkat blok yang ditentukan
Tinggi, lebar, kedudukan, bilangan lapisan dan warna latar belakang label boleh dikawal secara rawak
Label a pudar masuk dan keluar, dan ketelusan awal boleh ditukar
Kelajuan penciptaan label dan kelajuan pergerakan boleh dikawal (pemasa)
Saiz langkah pergerakan label boleh dikawal (jarak bergerak dalam setiap kitaran)
Apabila tetikus melayang, animasi akan dihentikan dengan ketelusan maksimum dan bilangan lapisan tertinggi Apabila tetikus keluar, keadaan sebelumnya akan dipulihkan
Menghadapi masalah:
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.
Kesan animasi:
Khan: Imej gif mungkin agak besar dan akan bergerak selepas beberapa ketika. Sabar
Coretan kod JS:
(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:
Salin kod
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
"type="text/javascript" charset="utf-8">
$(fungsi(){
$('#tag').activiTag({});
});
#tag{
sempadan:1px kelabu putus-putus;
lebar:250px;
ketinggian:250px;
atas: 50px;
kiri: 300px;
}
a{
padding:0px 3px;
saiz fon:12px;
ruang putih: nowrap;
paparan:tiada;
}