jqury+css实现可弹出伸缩层

页面导航:首页 > 网络编程 > JavaScript > jqury+css实现可弹出伸缩层

jqury+css实现可弹出伸缩层

来源: 作者: 时间:2016-01-19 18:32 【

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

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

/

/

2、以上图左侧面板为例,实现比较简单,只需了解和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;
	}	
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'));
        }
    });
});
布局需要有耐心,一点点调整已到达自己认为满意的程度


 

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <