Rumah >hujung hadapan web >tutorial js >kaedah jquery untuk mencapai kesan paparan pusingan halaman blinds_jquery

kaedah jquery untuk mencapai kesan paparan pusingan halaman blinds_jquery

WBOYasal: 2016-05-16 16:10:061296semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan jquery untuk mencapai kesan paparan tatal bidai halaman. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

1. Kod di sini memerlukan sokongan jquery1.3 atau lebih tinggi, seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

jQuery.fn.extend((

Fungsi($){

      var l = 4,//Bilangan baris menatal

            t=5000,//Selepas menatal sekali, berapa lama masa yang diperlukan untuk mula menatal pada kali seterusnya

              rt=500,//Masa berlalu untuk setiap n skrol

n="li",//Teg HTML untuk ditatal 
 terkandung dalam objek tatal lalai
o="ul",//Jika menatal, teg HTML 
 yang membungkus elemen tatal didayakan
              e,//Panggil objek

my,//Panggil koleksi semua objek untuk ditatal dalam objek

             h;//Ketinggian baris tatal

        var vLimit=80;//Lebih kecil sedikit daripada had visual 0.1s

        var maxRnum=Math.ceil(rt/vLimit);//Bilangan maksimum skrol

          var maxRh=0; // Setiap ketinggian skrol 

            var fnRollFirst=function(arg){//Gulung arg sebanyak 1 n, dan selepas selesai, alihkan n pertama ke kedudukan terakhir 

               var rCount=0; //Rekod kiraan tatal

                var rVal=setInterval(function(){//Gelung setiap vLimit, untuk jumlah maxRnum-1 kali 

rCount ;

                           arg.scrollTop(arg.scrollTop() maxRh);

If(rCount>=(maxRnum-1)){/1 kurang volum

;
                                                                                                                                                                 () h-maxRh*(maxRnum-1));//Nilai skrol terakhir diubah suai

//Alihkan elemen pertama ke penghujung

                                                                         var nowN=arg.children(n);

nowN.eq(nowN.length-1).after(nowN.eq(0));

//Kedudukan pertama perlu diperbetulkan dengan gulung semula selepas ia dikosongkan

                                                                                                                     };
                         },vLimit);

        };

        var fnRollArr=function(arg){//Mula menatal satu per satu untuk objek dalam tatasusunan

          var out=setInterval(function(){

                         fnRollFirst(arg.shift());

Jika(!arg.length){

;
                };

             },rt);                                              
        };
        var fnRoll=function(){//Dapatkan koleksi objek yang perlu ditatal satu demi satu

            var arr=new Array();

              e.kanak-kanak(o).setiap(fungsi(){

              var rn=$(ini).kanak-kanak(n);

Jika(rn.length>1){

                   arr.push($(ini));

                };

            });

              set Interval(function(){

                              fnRollArr(arr.slice(0));

             },t);

        };

        var fnLay=function(){//Layout halaman

              h=ms.height();

            var nu=Math.ceil(en.length/l);

          var u=$("<" o ">");

u.css({"overflow":"hidden","height":h "px","margin-bottom":"15px"});

untuk(var i=0;i
                    en.slice(nu*i,nu*(i 1)).wrapAll(u);

        };

        var fnMain=function(){//Tatal kaedah utama

Jika(maxRnum>1){

                        fnLay();

                      maxRh=Math.ceil(h/maxRnum);

                       fnRoll();

            };

        };

        var fnStart= function(arg){//Mulakan mod paparan

             e=arg;

              en = e.kanak-kanak(n);

               en.show();

Jika(en.panjang>l){

                         fnMain();

               } lain{

                       pulangan palsu;

            };

        };

         kembali {

​​​​​​ setLine: function(num){//Tetapkan bilangan baris untuk dibahagikan untuk menatal

(!isNaN(num) && num>0)?l=num:"";

                   kembalikan ini;

            },

​​​​​​ setMasa: function(num){//Selang tatal: milisaat

(!isNaN(num) && num>0)?t=num:"";

                   kembalikan ini;

            },

              startRoll: function(){//Mula menatal

                                      fnMula(ini);

            }
        };

}

)(jQuery));