zoukankan      html  css  js  c++  java
  • jQuery实现点击控制左右两边元素挤压显示效果

    该功能实现的是:分左、右两边布局,左边div默认展开,左边div中有一个元素,点击实现左边div隐藏,右边div挤压过来;再点击实现左边显示,右边挤过去。

    一、HTML代码:

    <div class="cont-container">
        <!-- 左侧div  -->
        <div class="cont-wrap-left" id="contWrapLeft">
            <a href="javascript:;" class="cont-wrap-switch" id="J_contWrapSwitch">
                <span></span>
            </a>
        </div>
    
        <!-- 右侧div  -->
        <div class="cont-wrap">
        </div>
    </div>

    二、CSS代码:

    /* 整个div样式 */
    .cont-container {
        position: relative;
        overflow: hidden;
    }
    
    /* 左侧div样式 */
    .cont-wrap-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 249px;
        height: 100%;
        border-right: 1px solid #E6E6E6;
        z-index: 9;
    }
    
    .cont-wrap-switch {
        display: block;
        position: absolute;
        top: 0;
        right:0;
        width: 18px;
        height: 35px;
        line-height: 35px;
        border-left: 1px solid #E6E6E6;
        background: #E6E9ED;
        z-index: 9;
    }
    
    .cont-wrap-switch sapn {
        display: inline-block;
        width: 18px;
        height: 24px;
        vertical-align: middle;
        background: url(../images/switch_btn.png) no-repeat -1px -24px;
    }
    
    .cont-wrap-switch:hover {
        background: #DEE0E4;
    }
    
    .cont-wrap-switch:hover sapn {
        background: -1px -0;
    }
    
    .cont-wrap-switch.off {
        right: -18px;
        background: #232C48;
    }
    
    .cont-wrap-switch.off span {
        background: url(../images/switch_btn.png) no-repeat -1px -72px;
    }
    
    .cont-wrap-switch.off:hover {
        background: #1F2740;
    }
    
    .cont-wrap-switch.off:hover sapn {
        background-position: -1px -48px;
    }

    三、JS代码:

    <script type="text/javascript">
        $("#J_contWrapSwitch").click(function(){
            if($(this).hasClass("off")) {
                $("#contWrapLeft").animate({ left: "0"});
                $(".cont-wrap").animate({marginLeft: "250px"}, 300);
                $(this).removeClass("off");
            } else {
                $("#contWrapLeft").animate({ left: "-255px"});
                $(".cont-wrap").animate({marginLeft: "0"}, 300);
                $(this).addClass("off");
            }
        });
    </script>
  • 相关阅读:
    BigDecimal 的用法
    奇葩问题:Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey
    论文速览:MFQE 2.0: A New Approach for Multi-frame Quality Enhancement on Compressed Video
    博文目录
    【DEBUG】ImportError: No module named 'pygal'
    反直觉的三门问题
    一些卷积概念和图解
    MATLAB随手记
    Python3随手记
    论文写作随手记
  • 原文地址:https://www.cnblogs.com/minozMin/p/8353011.html
Copyright © 2011-2022 走看看