<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <title>京东侧边栏触摸事件-手机模式测试</title> <style> *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a,a:hover{ color: #333; text-decoration: none; display: block; height: 50px; line-height: 50px; text-align: center; } .box{ height: 500px; margin: 30px auto; width: 90px; border: 1px solid red; overflow: hidden; } ul li{ width: 90px; height: 50px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; list-style: none; } .cur>a{ color: red; border-right: none; } </style> </head> <body> <div class="box"> <ul> <li class="cur"><a href="javascript:;">热门推荐</a></li> <li><a href="javascript:;">潮流女装</a></li> <li><a href="javascript:;">品牌男装</a></li> <li><a href="javascript:;">内衣配饰</a></li> <li><a href="javascript:;">家用电器</a></li> <li><a href="javascript:;">电脑办公</a></li> <li><a href="javascript:;">手机数码</a></li> <li><a href="javascript:;">母婴频道</a></li> <li><a href="javascript:;">图书</a></li> <li><a href="javascript:;">家居家纺</a></li> <li><a href="javascript:;">居家生活</a></li> <li><a href="javascript:;">家具建材</a></li> <li><a href="javascript:;">热门推荐</a></li> <li><a href="javascript:;">潮流女装</a></li> <li><a href="javascript:;">品牌男装</a></li> <li><a href="javascript:;">内衣配饰</a></li> <li><a href="javascript:;">家用电器</a></li> <li><a href="javascript:;">电脑办公</a></li> <li><a href="javascript:;">手机数码</a></li> <li><a href="javascript:;">母婴频道</a></li> <li><a href="javascript:;">图书</a></li> <li><a href="javascript:;">家居家纺</a></li> <li><a href="javascript:;">居家生活</a></li> <li><a href="javascript:;">家具建材</a></li> </ul> </div> </body> <script> var box=document.querySelector('.box'); var ul=box.querySelector('ul'); var lis=ul.querySelectorAll('li'); /*-----定位的最大、最小位置-----*/ var maxTop=0; var minTop=box.offsetHeight-ul.offsetHeight; /*-----------拖动ul最大最小位置-------------*/ var maxSwipe=maxTop+120; var minSwipe=minTop-120; /*---记录当前的值---*/ var currentY=0; /*封装添加过渡动画*/ function setTransition(){ ul.style.webkitTransition='transform 0.3s'; ul.style.transition='transform 0.3s'; } /*封装删除的过渡动画*/ function removeTransition(){ ul.style.webkitTransition='none'; ul.style.transition='none'; } /*封装添加Y轴移动*/ function setTranslateY(x){ ul.style.webkitTransform='translateY('+x+'px)'; ul.style.transform='translateY('+x+'px)'; } /*---------------------点击颜色变化&&点击的li移动到最顶端----------------------*/ Myclcik(box,function(){ box.addEventListener('click',function(e){ var target= e.target.parentNode; console.log(target); for(var i=0;i<lis.length;i++){ lis[i].classList.remove('cur'); lis[i].index=i; } target.classList.add('cur'); var y=-target.index*50; if(y>maxTop){ y=maxTop; } if(y<minTop){ y=minTop; } setTransition(); setTranslateY(y); currentY=y; }) }) /*------------------手动移动ul && 有限制范围------------------------*/ var startY=0; var moveY=0; var distanceY=0; ul.addEventListener('touchstart',function(e){ startY= e.targetTouches[0].clientY; }) ul.addEventListener('touchmove',function(e){ moveY= e.targetTouches[0].clientY; distanceY=moveY-startY; var y=distanceY+currentY; if(y>maxSwipe){ y=maxSwipe; } if(y<minSwipe){ y=minSwipe; } removeTransition(); setTranslateY(y); }) ul.addEventListener('touchend',function(e){ currentY=currentY+distanceY; if(currentY>maxTop){ currentY=maxTop; setTransition() setTranslateY(currentY); } if(currentY<minTop){ currentY=minTop; setTransition(); setTranslateY(currentY); } /*---------数据重置---------*/ startY=0; moveY=0; distanceY=0; }) /*封装移动端的点击函数*/ function Myclcik(obj,callback){ if(typeof obj=='object'){ var startTime=0; var isMove=false; obj.addEventListener('touchstart',function(){ startTime=Date.now(); }) obj.addEventListener('touchmove',function(){ isMove=true; }) obj.addEventListener('touchend',function(){ if(Date.now()-startTime<150 && !isMove){ callback && callback(); } startTime=0; isMove=false; }) } } </script> </html>
欢迎分享本文,转载请保留出处:前端ABC » 京东移动端侧边栏触摸事件