jQuery slidereveal實現的面板滑動側邊展出效果_jquery

我們藉助一個jQuery外掛：slidereveal.js，可以使用它控制面板左右側滑出與隱藏等效果，專案位址：https://github.com/nnattawat/slideReveal。

如何使用

首先在頁面中載入jquery庫檔案和slidereveal.js外掛程式。

複製程式碼 程式碼如下:

然後在body裡放置面板元素如div#slider，內容自定，並且放置觸發呼叫面板的元素如button或a元素。

複製程式碼 程式碼如下:

    Helloweba歡迎您！

展開左側

最後直接呼叫slidereveal.js插件，程式碼如下：

複製程式碼 程式碼如下:

$('#slider').slideReveal({
  trigger: $("#trigger")
});

選項設定

預設情況下，面板是從左側滑出，並且將主頁面內容向右“推”，並且可以使用鍵盤的“ESC”鍵關閉面板。

屬性	描述	預設值
width	整數，面板寬度。	250
push	布林型，設為true，面板展開時會將頁面主體內容「推」向一側，設為false時，面板展開在頁面主體內容之上。	true
position	字串，設定面板展開滑動的方向，可以設定為"left"或"right"	"left"
speed	整型，面板展開速度，單位毫秒。	300
trigger	jQuery DOM選擇器，設定可以觸發面板顯示和隱藏的頁面元素，如$("#element")	未定義
autoEscape	布林型，設定是否允許使用鍵盤的ESC鍵來隱藏已展開的面板。	true
top	整型，設定面板距離窗口上部的距離。	0
show	回調函數，當面板展開時呼叫。	-
shown	回調函數，當面板展開後呼叫。	-
hide	回調函數，當面板隱藏時呼叫。	-
show	回調函數，當面板隱藏後呼叫。	-

slidereveal.js外掛程式也提供了展開與隱藏的方法調用，程式碼如下：

複製程式碼 程式碼如下:

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

以上就是本文給大家分享的全部內容了，有需要的小夥伴快來參考下吧，希望對大家熟悉jQuery能夠有所幫助。