web学习笔记12-移动端简易电梯效果

前两个月离职之后就休息了短时间，最近刚入职新公司，开始做想的电商方面的项目，也挺有意思的，之前jquery相对用得少了点，基础也比较薄弱，在新的项目中就在慢慢补习中。这两天正好做到相关的电梯效果，就写了个小的demo，简易版，供大家刚开始搞的朋友们看看。

这里呢还是跟往常一样，先放上github链接Elevator和预览图，有个直观的感受才能有兴趣往下看，不过这个偏基础，如果刚入门的话可以看看。

电梯效果.gif

下面就开始正式的说下我的思路，大家要是有好的思路可以更我交流，互相学习学习。

第一步：设置meta，编写html架子,引入jquery

首先就是编写页面，页面分为左右两个部分，上面的数据在实际运用中都是从后台获取，或者是本地数据，我这暂时是写死的数据，左边为leftSide，右边为rightSide，左边每个分类都在右边有一块代表这个分类的区域，并且内部会有相应的内容。这块内容叫做rightContent。因为内容都是动态添加的，所以html部分只有很少的代码。

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <script language="javascript" src="jquery.js"></script>
</head>

  <body>
    <div class="content">
        <div class="leftSide" id="leftSide">

        </div>
        <div class="rightSide">
       
        </div>
    </div>
</body>

第二步：给架子添加css样式

       *{
            padding:0;
            margin: 0;
            background-color: #f5f5f9;
            overflow:hidden
        }
        .content{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
        }
        .leftSide{
            float: left;
            width: 30%;
            height: 100%;
            background-color: transparent;
            overflow: auto;
        }
        .rightSide{
            float: left;
            width: 70%;
            height: 100%;
            background-color: #f5f5f9;
            overflow: hidden;
        }

为了不让整个页面随鼠标滚动而滚动，所以要在*中设置overflow:hidden，而整块区域也同样要这么设置。左边区域为了可以上下滑动看分类，则是需要设置成auto的。

第三步：左右动态添加菜单并设置样式

左边要添加很多小块，并且需要设置选中样式，所以先添加样式

        .leftSide span{
            display: block;
            width: 100%;
            height: 40px;
            background-color: white;
            border-bottom: 1px solid transparent;
        }
        .leftSide span p{
            display: block;
            margin: 0 auto;
            width: 80%;
            height: 100%;
            background-color: transparent;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color:black;
            border-bottom: 1px solid lightgrey;
        }
        .leftSide .active{
            border-left: 3px solid red;
            background-color: #f5f5f9;
        }
        .rightSide .rightContent{
            width: 100%;
            height: 100%;
            background-color: #f5f5f9;
            overflow: auto;
        }
        .line{
            width: 80%;
            height: 50px;
            background-color: lightgrey;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            line-height: 50px;
        }

左右动态添加元素和假数据

    //分类数组
    var list = ['推荐分类','京东超市','手机数码','国际名牌','奢侈品','电脑办公','家用电器','食品生鲜','酒水饮料','母婴童装','玩具乐器','汽车用品','厨具','男装','女装','男鞋','女鞋','箱包手袋','钟表珠宝'];

    //设置左边滑动
    var html = '';
    for(var i = 0;i < list.length;i++){
        if(i == 0){
            html = '<span class="active" onclick="setActive('+i+')">'+'<p>'+list[i]+'</p>'+'</span>';
        }else{
            html = '<span onclick="setActive('+i+')">'+'<p>'+list[i]+'</p>'+'</span>';
        }
        rightContent = '<div class="rightContent"></div>';
        $("#leftSide").append(html);
        $(".rightSide").append(rightContent);

    }
      //动态添加假数据div
    var fadeDataDiv = '';
    for(var i = 0; i < list.length;i++){
        fadeDataDiv = '<div class="line">'+'商品数据'+i+'</div>';
        $(".rightContent").append(fadeDataDiv);
    }

第四步：获取距离顶部距离的数组

获取每一个分类右侧的div距离顶部的距离，在点击事件中可以进行相应的设置。

    //获取距离顶部距离的数组
    var topData = [];
    for(var j=0;j<$('.rightContent').length;j++){
        topData.push($('.rightContent').eq(j).offset().top);
    }

第五步：完成点击事件

在点击事件中首先要把已点击的样式去掉，然后为被点击的元素添加样式，同时设置右侧菜单距离顶部距离。

    //设置右边显示区域
    function setActive(i){
        $(".leftSide span").removeClass('active');
        $(".leftSide span").eq(i).addClass('active');
        $('.rightSide').animate({scrollTop:topData[i]+'px'});
    }

这样就基本完成了功能，在此基础上可以继续往复杂的写，也可以写不一样的。要是看到上面有问题可以留言讨论。