当前位置：首页 > 资讯 > 技术文档

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

时间：2021-04-09 01:38 编辑：来源：阅读：
扫一扫，手机访问

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

我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：[url=https://github.com/nnattawat/slideReveal]https://github.com/nnattawat/slideReveal[/url]。 [b]如何使用[/b] 首先在页面中加载jquery库文件和slidereveal.js插件。

[u]复制代码[/u] 代码如下:

<script src="jquery.js"></script>

<script src="jquery.slidereveal.min.js"></script>

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

[u]复制代码[/u] 代码如下:

<div id="slider" class="slider">

    Helloweba欢迎您！

</div>

<button id="trigger" class="trigger">展开左侧</button>

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

[u]复制代码[/u] 代码如下:

$('#slider').slideReveal({

  trigger: $("#trigger")

});

[b]选项设置[/b] 默认情况下，面板是从左侧滑出，并且将主页面内容向右“推”，并且可以使用键盘的“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插件还提供了展开与隐藏的方法调用，代码如下：

[u]复制代码[/u] 代码如下:

//展开面板

$('#slider').slideReveal("show");

//隐藏面板

$('#slider').slideReveal("hide");

以上就是本文给大家分享的全部内容了，有需要的小伙伴快来参考下吧，希望对大家熟悉jQuery能够有所帮助。

全部评论(0)

上一篇：jQuery Chosen通用初始化
下一篇：jquery遍历checkbox的注意事项说明

资讯排行榜
更多>>