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	回调函数，当面板隐藏时调用。	-
zeigen	Rückruffunktion, die aufgerufen wird, wenn das Panel ausgeblendet ist.	-

Das slidereveal.js-Plug-in bietet auch Erweiterungs- und Ausblendungsmethodenaufrufe. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

//Panel erweitern
$('#slider').slideReveal("show");
//Panel ausblenden
$('#slider').slideReveal("hide");

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Freunde in Not können sich darauf beziehen. Ich hoffe, dass es für alle hilfreich ist, sich mit jQuery vertraut zu machen.