一.首先是HTML代码: 记得在头部加一个移动端的视口
<header><divclass="logo">聚划算</div><divclass="nav"><divid="nuit"><ul><li><ahref="#">购物1</a></li><li><ahref="#">购物2</a></li><li><ahref="#">购物3</a></li><li><ahref="#">购物4</a></li><li><ahref="#">购物5</a></li><li><ahref="#">购物6</a></li><li><ahref="#">购物7</a></li></ul></div></div><divclass="btn">按钮</div></header>
二:接下来是CSS代码 很简单大家都能看懂 都是基本的低吗了
*{margin:0;padding: 0;}hearder{background:#ccc;height: 45px;width: 100%;position:relative;}header.logo{position:absolute;top:0;left: 0;width: 100px;height: 45px;background:pink;z-index: 999;text-align:center;line-height: 40px;font-size: 25px;}header.btn{position:absolute;top:0;right: 0;width:100px;height: 45px;background:pink;z-index: 999;}header.nav{padding: 0 60px0 100px;width: 100%;height: 45px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}#nuit{width: 100%;height: 45px;position:relative;background:#f00;}#nuit ul{list-style:none;height: 45px;padding-left: 10px;position:absolute;}#nuit ul li{float:left;width: 60px;height: 45px;text-align:center;margin-left: 10px;line-height: 40px;}#nuit ul li a{text-decoration:none;color:white;}.btn{text-align:center;line-height: 40px;}
三.最后就是JS代码了: 这是最核心的 看不懂的每一行都有注释
varbox=document.querySelector('#unit')varul=document.querySelector('ul')varnav=document.querySelector('.nav')//屏幕宽度varwindowWidth=document.documentElement.clientWidth ||document.body.clientWidth;//ul的真实宽度varallWidth=ul.children.length * 70;ul.style.width =allWidth+'px';//反弹值varmin=allWidth- (windowWidth- 100 - 60);vardeltaX;//信号量varnowX= 100;//移动数组,用于计算手指抬起时的瞬时速度varmoveAll= [];ul.addEventListener('touchstart',function(event) {event.preventDefault();//去掉过度ul.style.transition ='none';//记录偏差值 手指在滑块上的位置距离滑块左边的距离deltaX= event.touches[0].clientX-nowX;},false);ul.addEventListener('touchmove',function(event) {event.preventDefault();//改变信号量nowX= event.touches[0].clientX-deltaX;//动起来ul.style.left =nowX+'px';//将每次移动触发的位置添加到moveArr数组中moveAll.push(event.touches[0].clientX);},false);ul.addEventListener('touchend',function(event) {event.propertyIsEnumerable();//计算moveAll中最后两个坐标间的距离varend =moveAll.length - 1;vars =moveAll[end] -moveAll[end - 2];// s这个距离决定了结束时的瞬时速度,根据s计算一个新的惯性数值vartarget =nowX+ s * 5;if(target < -min){target = -min;}else if(target > 0) {target = 0;}ul.style.transition ='all 0.4s';ul.style.transition ='all 0.4s cubic-bezier(.1,.92,.31,2.01) 0s';//过度实现最终移动ul.style.left = target +'px';//改变信号量nowX= target;});
最后的效果大概是这个效果看的不太懂得可以访问聚划算的官网看看人家原来的效果!!!
