Kesan paparan sisi gelongsor panel dilaksanakan oleh jQuery slidereveal_jquery

Kami menggunakan pemalam jQuery: slidereveal.js, yang boleh digunakan untuk mengawal kesan gelongsor ke kiri dan kanan serta menyembunyikan alamat projek: https://github.com/nnattawat/. slaidDedahkan.

Cara menggunakan

Mula-mula muatkan fail perpustakaan jquery dan pemalam slidereveal.js dalam halaman.

Salin kod Kod adalah seperti berikut:

Kemudian letakkan elemen panel seperti div#slider dalam badan, dengan kandungan tersuai dan letakkan elemen yang mencetuskan panggilan panel, seperti butang atau elemen.

Salin kod Kod adalah seperti berikut:

Helloweba mengalu-alukan anda!

Kembangkan kiri


Akhir sekali, hubungi terus pemalam slidereveal.js, kodnya adalah seperti berikut:

Salin kod

Kod adalah seperti berikut: $('#slider').slideReveal({ pencetus: $("#trigger") });

Tetapan pilihan

Secara lalai, panel meluncur keluar dari kiri dan "menolak" kandungan halaman utama ke kanan, dan panel boleh ditutup menggunakan kekunci "ESC" papan kekunci.

Hartanah	Penerangan	Nilai lalai
lebar	Jenis integer, lebar panel.	250
tolak	Boolean, ditetapkan kepada benar, panel akan "menolak" kandungan utama halaman ke satu sisi apabila dikembangkan Apabila ditetapkan kepada palsu, panel akan berkembang di atas kandungan utama halaman.	benar
kedudukan	String, tetapkan arah pengembangan dan gelongsor panel, yang boleh ditetapkan kepada "kiri" atau "kanan"	"kiri"
kelajuan	Integer, kelajuan pengembangan panel, unit: milisaat.	300
pencetus	Pemilih DOM jQuery, tetapkan elemen halaman yang boleh mencetuskan paparan dan penyembunyian panel, seperti $("#element")	Tidak ditentukan
autoEscape	Jenis Boolean, menetapkan sama ada membenarkan penggunaan kekunci ESC papan kekunci untuk menyembunyikan panel yang dikembangkan.	benar
atas	Integer, menetapkan jarak antara panel dan bahagian atas tetingkap.	0
tunjukkan	Fungsi panggil balik, dipanggil apabila panel dikembangkan.	-
ditunjukkan	Fungsi panggil balik, dipanggil apabila panel dikembangkan.	-
sembunyikan	Fungsi panggil balik, dipanggil apabila panel disembunyikan.	-
show	回调函数，当面板隐藏后调用。	-

slidereveal.js插件还提供了展开与隐藏的方法调用，代码如下：

复制代码 代码如下:

//展开面板
$('#slider').slideReveal("show");
//隐藏面板
$('#slider').slideReveal("hide");

以上就是本文给大家分享的全部内容了，有需要的小伙伴快来参考下吧，希望对大家熟悉jQuery能够有所帮助。