• 回忆之横竖滑动门


    直接看效果点这里

    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

    JS

    //横竖滑动门
    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;
            });
        });
    }
  • 相关阅读:
    Swift-'as?','as'用法
    Swift-'!','?'用法
    Swift-Debug下打印函数名和行数
    Swift-Swift中的全局变量和函数的创建
    Swift/Objective-C-Swift与Objective-C混用教程
    iOS-代码修改Info.plist文件
    hexo干货系列:(八)hexo文章自动隐藏侧边栏
    hexo干货系列:(七)hexo安装统计插件
    hexo干货系列:(六)hexo提交搜索引擎(百度+谷歌)
    hexo干货系列:(五)hexo添加站内搜索
  • 原文地址:https://www.cnblogs.com/jununx/p/4473373.html
走看看 - 开发者的网上家园