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:
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 ">" 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
Artikel terbaru oleh pengarang
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Topik-topik yang berkaitan
Lagi>