web学习笔记12-移动端简易电梯效果
2017-07-17 17:39
183 查看
前两个月离职之后就休息了短时间,最近刚入职新公司,开始做想的电商方面的项目,也挺有意思的,之前jquery相对用得少了点,基础也比较薄弱,在新的项目中就在慢慢补习中。这两天正好做到相关的电梯效果,就写了个小的demo,简易版,供大家刚开始搞的朋友们看看。
这里呢还是跟往常一样,先放上github链接Elevator和预览图,有个直观的感受才能有兴趣往下看,不过这个偏基础,如果刚入门的话可以看看。
下面就开始正式的说下我的思路,大家要是有好的思路可以更我交流,互相学习学习。
为了不让整个页面随鼠标滚动而滚动,所以要在*中设置overflow:hidden,而整块区域也同样要这么设置。左边区域为了可以上下滑动看分类,则是需要设置成auto的。
左右动态添加元素和假数据
这样就基本完成了功能,在此基础上可以继续往复杂的写,也可以写不一样的。要是看到上面有问题可以留言讨论。
这里呢还是跟往常一样,先放上github链接Elevator和预览图,有个直观的感受才能有兴趣往下看,不过这个偏基础,如果刚入门的话可以看看。
下面就开始正式的说下我的思路,大家要是有好的思路可以更我交流,互相学习学习。
第一步:设置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'}); }
这样就基本完成了功能,在此基础上可以继续往复杂的写,也可以写不一样的。要是看到上面有问题可以留言讨论。
相关文章推荐
- vue移动端实现红包雨效果
- js 简易版滚动条实例(适用于移动端H5开发)
- css3动画效果:2 简易动画
- Html5实现移动端、PC端 刮刮卡效果
- HTML5 canvas实现移动端上传头像拖拽裁剪效果
- 移动端页面跳转过程中loading效果的小实现
- 实现一个简易的幻灯片(slider)效果
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
- 基于OpenCV的视频图像组态 (12): 翻转式由远到近动画效果
- Android实战简易教程<十二>(ViewFlipper实现幻灯效果)
- DrawerLayout实现的简易的侧滑效果
- 最简易的JQUERY折叠菜单 有预览效果
- [37期]DIV+CSS圆角效果的简易实现[原创]
- 纯css写移动端流程图效果
- Unity 简易的UI背景昼夜轮替效果
- 一个简易的“返回顶部”页面效果
- HTML5在移动端开发的12大特性
- 一个简易模糊视图类的封装,可做出模糊图片效果
- Android实战简易教程-第二十六枪(基于ViewPager实现微信页面切换效果)
- 基于JavaScript实现移动端TAB触屏切换效果