WEB开发中有时需要在页面上设置一个控制面板，默认是不显示的，当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。
如何使用
首先在页面中加载jquery库文件和slidereveal.js插件。
<script src="jquery.js"></script>
<script src="jquery.slidereveal.min.js"></script>
然后在body里放置面板元素如p#slider，内容自定，并且放置触发调用面板的元素如button或者a元素。
<p id="slider" class="slider">
Helloweba欢迎您！
</p>
<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插件实现的面板滑动侧边展出效果的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。