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>
  • 相关阅读:
    数据机构与算法学习(四)- 链表
    DFS深度优先
    LeetCode.98验证二叉树
    输入一个有符号整数,输出该整数的反转值。
    如何交换两个对象
    泛型简介,泛型类及使用
    一个普通的逻辑问题
    for循环
    第一次比赛唯一ACCEPT的题目笑哭
    输入100以内具有10个以上因子的整数 并输出它的因子
  • 原文地址:https://www.cnblogs.com/minozMin/p/8353011.html
Copyright © 2011-2022 走看看