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

来源：互联网发布：c语言逆波兰算法编辑：程序博客网时间：2024/05/16 15:15

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

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

阅读全文

0 0