前两个月离职之后就休息了短时间，最近刚入职新公司，开始做想的电商方面的项目，也挺有意思的，之前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'});
}
这样就基本完成了功能，在此基础上可以继续往复杂的写，也可以写不一样的。要是看到上面有问题可以留言讨论。
网友评论