前端ABC<!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;
}
.current>a{
color: red;
border-right: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class=""><a href="javascript:;">热门推荐</a></li>
<li class="current"><a href="javascript:;">潮流女装</a></li>
<li class=""><a href="javascript:;">品牌男装</a></li>
<li class=""><a href="javascript:;">内衣配饰</a></li>
<li class=""><a href="javascript:;">家用电器</a></li>
<li class=""><a href="javascript:;">电脑办公</a></li>
<li class=""><a href="javascript:;">手机数码</a></li>
<li class=""><a href="javascript:;">母婴频道</a></li>
<li class=""><a href="javascript:;">图书</a></li>
<li class=""><a href="javascript:;">家居家纺</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><a href="javascript:;">家具建材</a></li>
<li class=""><a href="javascript:;">热门推荐</a></li>
<li class=""><a href="javascript:;">潮流女装</a></li>
<li class=""><a href="javascript:;">品牌男装</a></li>
<li class=""><a href="javascript:;">内衣配饰</a></li>
<li class=""><a href="javascript:;">家用电器</a></li>
<li class=""><a href="javascript:;">电脑办公</a></li>
<li class=""><a href="javascript:;">手机数码</a></li>
<li class=""><a href="javascript:;">母婴频道</a></li>
<li class=""><a href="javascript:;">图书</a></li>
<li class=""><a href="javascript:;">家居家纺</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><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('current');
lis[i].index=i;
}
target.classList.add('current');
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 » 京东移动端侧边栏效果