滑动面板效果 Slide Panel

未知
JavaScript HTML/CSS
跨平台
2015-05-05
大胖森

Slide Panel 是一个 jQuery 插件,使元素可以展开、折叠,创建一个滑动面板效果。目前只支持水平方向的滑动效果。未来的发展趋势:支持垂直水平方向滑动;可从 dom删除面板。

HTML

<div id="slide_panel" class="panel right">
	<div class="panel_content"></div>
	<div class="panel_tab"></div>
</div>

         

CSS

.left{float:left;}
.right{float: right;}

.panel{
	height:100%;
	display:block;
	overflow:hidden;
}

.panel_tab{
	height:100%;
	overflow: hidden;
}

         

JAVASCRIPT

$("#a_panel").panel({
	handle:'#slide_panel > .panel_tab',
	content:'#slide_panel > .panel_content',
	opened:true,
	direction : "both",
	openedSize : 180,
	openEvent : 'mouseenter',
	closeEvent : 'mouseleave',
	openSelector : '#slide_panel',
	closeSelector : '#slide_panel',
});


加载中

评论(0)

暂无评论

暂无资讯

暂无问答

jQuery制作js下拉收缩、js展开收起、js显示隐藏效果

今天发布一个 jquery基础教程-- jQuery制作js下拉收缩、js展开收起、js显示隐藏效果! 废话不多说了先上效果图 素材图片下拉上下图标下载 下面切入正题 先引入jquery.js框架就不说了 然后写h...

2012/09/10 11:14
1K
0
bootSTtrap2《轮播图,动态图,模态框,折叠,提示工具

第一步:引入三个文件 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-1.12.3.js" ><...

2016/10/19 09:05
11
0
Axure RP 7.0的动作详解

http://www.blogjava.net/amigoxie/archive/2015/05/2

2015/05/20 09:50
67
0
android-image-slide-panel图片照片墙的加载和滑动特效

android-image-slide-panel图片照片墙的加载和滑动特效

2015/12/01 10:44
69
0
jQuery 入门教程(7): 滑动效果

jQuery支持使用下面方法来实现HTML元素的滑动效果: slideDown() slideUp() slideToggle() slideDown方法 用来实现向下滑动动画效果,其基本语法为: $(selector).slideDown(speed,callback...

2013/09/27 11:22
15
0
android-image-slide-panel图片照片墙的加载和滑动特效《IT蓝豹》

android-image-slide-panel图片照片墙的加载和滑动特效

2015/11/06 10:23
76
0
jquerymobile移动门户开发初探

地址:http://jquerymobile.com/ 使用后体会:常用的移动前端框架,学习成本较低,基本满足移动开发的需求,但若需要细粒度的前端开发需要另设计改造。框架可能比较大,在2G网络难以有较好的...

2013/03/13 16:08
288
0
专业词汇---BUG部分-00

手机部件描述部分总共59个单词

2014/08/13 10:55
12
0
Mark一下,滑动门插件

Sliding Panels - 滑动门插件 1)Colorful Sliders With jQuery & CSS3使用 jQuery 和 CSS3 的特性来创建3D 动态的幻灯效果。主要功能:创建幻灯效果、动态改变柱状图、能够和 jQuery 整合。...

2011/11/02 11:15
140
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部