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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
什么是SOLID
Mar 24 Javascript
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小教程之实现链表
2014/06/09 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
WAF的正确bypass
2017/01/05 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
javascript实用方法总结
2015/02/06 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
学术会议主持词
2014/03/17 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
应届生求职信
2014/05/31 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
中班下学期幼儿评语
2014/12/30 职场文书