滑动面板效果 Slide Panel

• 授权协议: 未知
• 开发语言: JavaScript HTML/CSS
• 操作系统: 跨平台
• 软件首页: http://robincwillis.github.io/SlidePanel/example/index.html
• 软件文档: https://github.com/robincwillis/SlidePanel

软件介绍

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',
});

本文地址：https://codercto.com/soft/d/21263.html