当前位置:Gxlcms > html代码 > jqury+css实现可弹出伸缩层_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:28人阅读

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')");        }    });});
布局需要有耐心,一点点调整已到达自己认为满意的程度




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

人气教程排行