jQuery teg awan dinamik plug-in_jquery

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:

Salin kod Kod adalah seperti berikut:

(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()                 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 {A.CSS ({OPACITY: Opcy_})}
                        jika tidak (2*n                                                                                                                                                                                                                                             ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                                                           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

Kod adalah seperti berikut:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">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;
    }