jqury+css实现可弹出伸缩层_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:39:45

原创

1466人浏览过

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

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

html代码：

立即学习“前端免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

<div id="shortcutPanelDiv">    <button id="shortcutPanelSwitcher" title="快捷面板">    </button>    <div id="shortcutPanelContent">        <div id="shortcutPanel-1">            <button id="btn-snq">            </button>            <button id="btn-sbq">            </button>            <button id="btn-lcq">            </button>        </div>        <div id="shortcutPanel-2">            <button id="btn-cyq">            </button>            <button id="btn-lsq">            </button>            <button id="btn-hdq">            </button>        </div>        <div id="shortcutPanel-3">            <button id="btn-jzs">            </button>            <button id="btn-jms">            </button>            <button id="btn-pds">            </button>        </div>        <div id="shortcutPanel-4">            <button id="btn-lxs">            </button>        </div>    </div></div>

登录后复制

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

登录后复制

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