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

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

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

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

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

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

第二步：给架子添加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 = ''+'
'+list[i]+'
'+'';
    }else{
        html = ''+'
'+list[i]+'
'+'';
    }
    rightContent = '
';
    $("#leftSide").append(html);
    $(".rightSide").append(rightContent);

}
  //动态添加假数据div
var fadeDataDiv = '';
for(var i = 0; i < list.length;i++){
    fadeDataDiv = '
'+'商品数据'+i+'
';
    $(".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'});
}

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