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

WBOY
Lepaskan: 2016-05-16 16:10:06
asal
1293 orang telah melayarinya

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

2. Halaman boleh kelihatan seperti ini
Salin kod Kod adalah seperti berikut:

 

  •      李飞正在申请成为经验达人
     

  •  

  •      李飞已向职场专题《我是个亚太人呀亚太人》投稿
     

  •  

  •      董川民已成功购买职场专题《我是个亚太人呀亚太人
     

  •  

  •      李飞对《我是个亚太人呀亚太人》的解决方案又卖出一次
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •    
     

  •      李飞向职场专题《我是个亚太人呀亚太人》的投稿已通过审核,获得1元奖励。
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •   
     

  •      李飞已正式成为经验达人
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •     
     

  •      李飞已邀请董川民成为经验达人
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥评论经验:
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        
     

  •  

  •      三内里奥回答了大飞的提问
        


  • Sannerio menjawab Soalan Da Fei



  • Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan