我們借助一款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能夠有所幫助。