jQuery+slidereveal实现的面板滑动侧边展出效果_jquery

如何使用

首先在页面中加载jquery库文件和slidereveal.js插件。

代码如下:

然后在body里放置面板元素如div#slider，内容自定，并且放置触发调用面板的元素如button或者a元素。

代码如下:

Helloweba欢迎您！

展开左侧

最后直接调用slidereveal.js插件，代码如下：

代码如下:
$('#slider').slideReveal({
trigger: $("#trigger")
});

选项设置

默认情况下，面板是从左侧滑出，并且将主页面内容向右“推”，并且可以使用键盘的“ESC”键关闭面板。

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

代码如下:
//展开面板
$('#slider').slideReveal("show");
//隐藏面板
$('#slider').slideReveal("hide");