欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-13 19:06:10
...
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')");        }    });});
布局需要有耐心,一点点调整已到达自己认为满意的程度




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