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

来源：动视网责编：小采时间：2020-11-27 16:09:39

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

jqury+css实现可弹出伸缩层_html/css_WEB-ITnose:1、使用可弹出伸缩窗调整了之前的页面布局，使用这种布局使整个界面看起来更加清爽也更简洁 2、以上图左侧面板为例，实现比较简单，只需了解html和css布局就大致差不多了 html代码： CSS： #short

推荐度：

点击下载本文 文档为doc格式

导读jqury+css实现可弹出伸缩层_html/css_WEB-ITnose:1、使用可弹出伸缩窗调整了之前的页面布局，使用这种布局使整个界面看起来更加清爽也更简洁 2、以上图左侧面板为例，实现比较简单，只需了解html和css布局就大致差不多了 html代码： CSS： #short

1、使用可弹出伸缩窗调整了之前的页面布局，使用这种布局使整个界面看起来更加清爽也更简洁

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

html代码：

CSS：

#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;	}

js代码：

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

布局需要有耐心，一点点调整已到达自己认为满意的程度

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

推荐度：

点击下载本文 文档为doc格式

标签：弹出实现 html

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐