jQuery+slidereveal實現的面板滑動側邊展出效果，jqueryslidereveal

jQuery+slidereveal實現的面板滑動側邊展出效果，jqueryslidereveal

我們藉助一款jQuery外掛程式：slidereveal.js，可以使用它控制台左右側滑出與隱藏等效果，項目地址：https://github.com/nnattawat/slideReveal。

如何使用

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

複製代碼 代碼如下:
<script src="jquery.js"></script>
<script src="jquery.slidereveal.min.js"></script>

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

複製代碼 代碼如下:
<div id="slider" class="slider">
    Helloweba歡迎您！
</div>
<button id="trigger" class="trigger">展開左側</button>

最後直接調用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能夠有所協助。