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

点柈

2017-07-17

前两个月离职之后就休息了短时间，最近刚入职新公司，开始做想的电商方面的项目，也挺有意思的，之前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'});
}

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