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

我们借助一款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能够有所帮助。