京东移动端分类页面侧导航栏实现

window.function(){/*获取左侧栏*/var ct_cLeft=document.querySelector(".ct_cLeft");/*获取左侧栏的高度*/var leftHeight=ct_cLeft.offsetHeight;/*获取用来滑动的列表*/var ulBox=ct_cLeft.querySelector("ul:first-of-type");var ulBoxHeight=ulBox.offsetHeight;/*获取所有li元素*/var lis=ulBox.querySelectorAll("li");/*设置静止状态下的最大top值*/var maxTop=0;/*设置静止状态下的最小的top值*/var minTop=leftHeight-ulBoxHeight;/*设置滑动状态下的最大的top值*/var maxBounceTop=maxTop+100;/*设置滑动状态下的最小top值*/var minBounceTop=minTop-100;console.log(maxBounceTop+":"+minBounceTop);/*实现滑动*/var startY=0;var moveY=0;var distanceY=0;/*记录当前元素滑动到的距离*/var currentY=0;/*添加滑动事件*/ulBox.addEventListener("touchstart",function(e){/*获取手指的起始坐标*/startY= e.targetTouches[0].clientY;});ulBox.addEventListener("touchmove",function(e){moveY= e.targetTouches[0].clientY;/*计算距离的差异*/distanceY=moveY-startY;/*判断滑动的时候是否超出当前指定的滑动区间*/if(currentY+distanceY > maxBounceTop || currentY+distanceY < minBounceTop){console.log("超出范围啦");return;}/*先将之前可能添加的过渡效果清除*/ulBox.style.transition="none";/*实现偏移操作:应该在之前的滑动距离的基础之上再进行滑动*/ulBox.style.top=(currentY+distanceY)+"px";});ulBox.addEventListener("touchend",function(e){/*判断当前滑动的距离是否在静止状态和滑动状态下的最小top值之间*/if(currentY+distanceY < minTop){currentY=minTop;/*回到minTop位置*/ulBox.style.transition="top 0.5s";ulBox.style.top=minTop+"px";}else if(currentY+distanceY > maxTop){currentY=maxTop;/*回到maxTop位置*/ulBox.style.transition="top 0.5s";ulBox.style.top=maxTop+"px";}else{/*记录当前滑动的距离*/currentY+=distanceY;}});/*为每一个li元素设置添加一个索引值*/for(var i=0;i<lis.length;i++){/*lis[i].setAttribute("index",i);*/lis[i].index=i;}/*绑定移动端的tap事件*//*itcast.tap(ulBox,function(e){/!*1.修改li元素的样式：将所有li元素的active样式清除，再为当前被点击的li元素添加active样式*!/for(var i=0;i<lis.length;i++){lis[i].classList.remove("active");}/!*为当前被单击的li元素添加样式*!/var li=e.target.parentNode;var liHeight=li.offsetHeight;li.classList.add("active");/!*2.移动当前的li元素到父容器的最顶部，但是不能超出之前设定了静止状态下的最小top值*!//!*获取当前li元素的索引值*!/var index=li.index;/!*开启过渡*!/ulBox.style.transition="top .5s";/!*设置偏移*!/if(-index*liHeight < minTop){/!*只能偏移到minTop位置*!/ulBox.style.top=minTop+"px";currentY=minTop;}else{ulBox.style.top=-index*liHeight+"px";currentY=-index*liHeight;}});*//*$(ulBox).on("tap",function(e){/!*1.修改li元素的样式：将所有li元素的active样式清除，再为当前被点击的li元素添加active样式*!/for(var i=0;i<lis.length;i++){lis[i].classList.remove("active");}/!*为当前被单击的li元素添加样式*!/var li=e.target.parentNode;var liHeight=li.offsetHeight;li.classList.add("active");/!*2.移动当前的li元素到父容器的最顶部，但是不能超出之前设定了静止状态下的最小top值*!//!*获取当前li元素的索引值*!/var index=li.index;/!*开启过渡*!/ulBox.style.transition="top .5s";/!*设置偏移*!/if(-index*liHeight < minTop){/!*只能偏移到minTop位置*!/ulBox.style.top=minTop+"px";currentY=minTop;}else{ulBox.style.top=-index*liHeight+"px";currentY=-index*liHeight;}});*//*绑定fastclick*/if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {/*参数可以是任意的dom元素，如果写document.body，说明会将document.body下面的所的元素都绑定fastclick*/FastClick.attach(document.body);}, false);}/*fastclick使用的时候就是来绑定添加click事件*/ulBox.addEventListener("click",function(e){/*1.修改li元素的样式：将所有li元素的active样式清除，再为当前被点击的li元素添加active样式*/for(var i=0;i<lis.length;i++){lis[i].classList.remove("active");}/*为当前被单击的li元素添加样式*/var li=e.target.parentNode;var liHeight=li.offsetHeight;li.classList.add("active");/*2.移动当前的li元素到父容器的最顶部，但是不能超出之前设定了静止状态下的最小top值*//*获取当前li元素的索引值*/var index=li.index;/*开启过渡*/ulBox.style.transition="top .5s";/*设置偏移*/if(-index*liHeight < minTop){/*只能偏移到minTop位置*/ulBox.style.top=minTop+"px";currentY=minTop;}else{ulBox.style.top=-index*liHeight+"px";currentY=-index*liHeight;}})
}

京东移动端分类页面侧导航栏实现相关推荐

小米商城侧导航栏的实现（导航栏的制作）
侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢? 下面看一看我制作的小米商城的侧导航栏. 看下列代码: <body><div class=& ...
页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变
一.大盒子app里有一个heades的导航栏,通过:style="headStyle"来改变它的颜色等样式,需要改变的,不要在style样式里定义,否则代码会执行style里定义的 ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
页面顶部导航栏css样式布局
项目场景: css样式布局例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述顶部导航栏出现滚动条,滚动条位置在页面底部解决方 ...
Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件下载保存为AntDes ...
微信小程序制作页面内导航栏
描述项目要写一个页面内的导航栏,功能包括点击更改导航栏的样式,切换数据源. 成果介绍首先对导航栏设置flex布局,让三个导航标签评分屏幕,之后设置点击事件,样式改变和数据切换代码 wxml & ...
java写左侧导航栏界面,jQuery----左侧导航栏面板切换实现
页面运行结果: 点击曹操点击刘备点击孙权原图需求说明:原图如上所示,点击一方诸侯的时候,显示该诸侯手下猛将,其他诸侯手下猛将隐藏页面结构: 实现思路: ①给大的li注册鼠标点击事件当鼠标点 ...
uniapp隐藏页面顶部导航栏和手机系统顶部导航栏
1.隐藏页面导航栏: pages.json文件在"style":{ "app-plus":{ "titleNview": false } ...
小程序分类页实现三级分类，顶部导航栏，左侧分类栏，右侧数据列表
如果大家一直读石头哥的文章,或者看石头哥的视频,肯定知道,石头哥的点餐小程序有实现二级菜品或者商品分类. 如下图但是有时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类.随便教下大家 ...
在同一个页面切换导航栏保持正确选中状态（单页面）
方法一:触发点击事件选中状态class是active, $(function(){ $(".clearfix li").click(function() { ...

京东移动端分类页面侧导航栏实现

京东移动端分类页面侧导航栏实现相关推荐

最新文章

热门文章