回忆之横竖滑动门

直接看效果点这里

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 横竖滑动门 </title>
    <link rel="stylesheet" href="sliding-door.css"/>
</head>
<body>
<div class="m-sliding-x" id="J_SlidingX">
    <div class="list list-1">
        <a href="javascript:;" class="hd">1</a>
        <div class="bd">内容1</div>
    </div>
    <div class="list list-2">
        <a href="javascript:;" class="hd">2</a>
        <div class="bd">内容2</div>
    </div>
    <div class="list list-3">
        <a href="javascript:;" class="hd">3</a>
        <div class="bd">内容3</div>
    </div>
    <div class="list list-4">
        <a href="javascript:;" class="hd">4</a>
        <div class="bd">内容4</div>
    </div>
</div>

<div class="m-sliding-y" id="J_SlidingY">
    <div class="list list-1">
        <a href="javascript:;" class="hd">1</a>
        <div class="bd">内容1</div>
    </div>
    <div class="list list-2">
        <a href="javascript:;" class="hd">2</a>
        <div class="bd">内容2</div>
    </div>
    <div class="list list-3">
        <a href="javascript:;" class="hd">3</a>
        <div class="bd">内容3</div>
    </div>
    <div class="list list-4">
        <a href="javascript:;" class="hd">4</a>
        <div class="bd">内容4</div>
    </div>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="sliding-door.js"></script>
<script>
    // 横向滑动门
    slidingDoor({
        btnList : $('#J_SlidingX .list .hd'),
        mainList : $('#J_SlidingX .list'),
        btnOffset : 40,
        mainOffset : 160,
        event : 'click',
        direction : 'x'
    });

    // 竖向滑动门
    slidingDoor({
        btnList : $('#J_SlidingY .list .hd'),
        mainList : $('#J_SlidingY .list'),
        btnOffset : 40,
        mainOffset : 160,
        event : 'click',
        direction : 'y'
    });
</script>
</body>
</html>

View Code

CSS

/*m-sliding-x*/
.m-sliding-x{ width: 320px; height:100px; overflow:hidden; position:relative; margin: 10px auto; }
.m-sliding-x .list {position:absolute;top:0;width:200px;height:100%; text-align: center; line-height: 100px; background-color: #999;}
.m-sliding-x .list .hd{position:relative;float:left; height:100%; width:40px; text-align: center; line-height: 100px; color: #fff; text-decoration: none; background-color: #141414; }
.m-sliding-x .list .hd:hover{ background-color:#2A2829;}
.m-sliding-x .list-1{left:0;}
.m-sliding-x .list-2{left:200px;}
.m-sliding-x .list-3 {left:240px;}
.m-sliding-x .list-4{left:280px;}
.m-sliding-x .list .bd{ position:absolute; left:40px; top:0; width: 160px; height:100%; }

/*m-sliding-y*/
.m-sliding-y{ width: 100px; height:320px; overflow:hidden; position:relative; margin: 10px auto; }
.m-sliding-y .list {position:absolute;left:0;width:100%;height:200px; text-align: center; line-height: 200px; background-color: #999;}
.m-sliding-y .list .hd{position:relative;float:left; height:40px; width:100%; text-align: center; line-height: 40px; color: #fff; text-decoration: none; background-color: #141414; }
.m-sliding-y .list .hd:hover{ background-color:#2A2829;}
.m-sliding-y .list-1{top:0;}
.m-sliding-y .list-2{top:200px;}
.m-sliding-y .list-3 {top:240px;}
.m-sliding-y .list-4{top:280px;}
.m-sliding-y .list .bd{ position:absolute; top:40px; left:0; width: 100%; height:160px; }

View Code

//横竖滑动门
function slidingDoor(opt){
    var oBtnList = opt.btnList,
        oBtn = opt.btnOffset,
        oMainList = opt.mainList,
        oMain = opt.mainOffset,
        ev = opt.event || 'click',
        oDirection = opt.direction || 'x',
        len = oBtnList.length;
    oBtnList.each(function(i, v){
        $(this).on(ev, function(){
            for(var n = 1; n <= i; n++){//第一个不需要动
                if(oDirection === 'x'){
                    oMainList.eq(n).animate({
                        left:oBtn*n+'px'
                    });
                }else{
                    oMainList.eq(n).animate({
                        top:oBtn*n+'px'
                    });
                }
            }
            for(var j = n; j < len; j++){
                if(oDirection === 'x'){
                    oMainList.eq(j).animate({
                        left:oBtn*j+oMain+'px'
                    });
                }else{
                    oMainList.eq(j).animate({
                        top:oBtn*j+oMain+'px'
                    });
                }
            }
            return false;
        });
    });
}