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')"); } });});布局需要有耐心,一点点调整已到达自己认为满意的程度
版权声明:本文为博主原创文章,未经博主允许不得转载。
推荐阅读
-
JQuery弹出层,实现弹层切换,可显示可隐藏。_html/css_WEB-ITnose
-
如何用css+js实现点击按钮弹出div层_html/css_WEB-ITnose
-
html+javascript实现可拖动可提交的弹出层对话框效果_javascript技巧
-
jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框_html/css_WEB-ITnose
-
JQuery弹出层,实现弹层切换,可显示可隐藏。_html/css_WEB-ITnose
-
jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框_html/css_WEB-ITnose
-
css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose
-
html+javascript实现可拖动可提交的弹出层对话框效果_javascript技巧
-
如何用css+js实现点击按钮弹出div层_html/css_WEB-ITnose
-
css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose