jqury+css实现可弹出伸缩层_html/css

2、以上图左侧面板为例，实现比较简单，只需了解html和css布局就大致差不多了

html代码：

#shortcutPanelDiv	{	left: 0;	bottom: 100px;	position: absolute;	z-index: 1;	width: 22px;	height: 170px;	} #shortcutPanelSwitcher	{	margin-top: 45px;	height: 80px;	width: 22px;	border: 0;	right: 0;	position: absolute;	background-color: #F0F0F0;	background-image: url("../img/table/RightArrow.png");	background-position: center;	background-repeat: no-repeat;	} #shortcutPanelContent	{	background-color: #F0F0F0;	position: absolute;	right: 22px;	height: 100%;	width: 230px;	}#shortcutPanel-1	{	margin-top: 10px;	margin-left: 5px;	} #shortcutPanel-2	{	margin-top: 10px;	margin-left: 5px;	} #shortcutPanel-3	{	margin-top: 10px;	margin-left: 5px;	} #shortcutPanel-4	{	margin-top: 10px;	margin-left: 5px;	}	

var isShortcutPanelShow = false;$(function(){ $("#shortcutPanelSwitcher").click(function() { if (isShortcutPanelShow == false) { $("#shortcutPanelDiv").animate( { width: '252px', }, "slow"); isShortcutPanelShow = true; $("#shortcutPanelSwitcher").css("background-image", "url('img/table/LeftArrow.png')"); } else { $("#shortcutPanelDiv").animate( { width: '22px', }, "slow"); isShortcutPanelShow = false; $("#shortcutPanelSwitcher").css("background-image", "url('img/table/RightArrow.png')"); } });});

版权声明：本文为博主原创文章，未经博主允许不得转载。