kaedah jquery untuk mencapai kesan paparan pusingan halaman blinds

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));