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


Posted in Javascript onMarch 14, 2015

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

Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
You might like
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
写的htc的数据表格
2007/01/20 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python正则实现提取电话功能
2018/02/24 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
小学生打架检讨书
2014/01/26 职场文书
对公司合理化的建议书
2014/03/12 职场文书
工作分析计划书
2014/04/30 职场文书
工会换届选举方案
2014/05/21 职场文书
新年晚会开场白
2015/05/29 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android