聚划算导航栏的反弹效果代码 纯原生js实现

一.首先是HTML代码:  记得在头部加一个移动端的视口

<header>
    <div class="logo">聚划算</div>
    <div class="nav">
        <div id="nuit">
            <ul>
                <li><a href="#">购物1</a></li>
                <li><a href="#">购物2</a></li>
                <li><a href="#">购物3</a></li>
                <li><a href="#">购物4</a></li>
                <li><a href="#">购物5</a></li>
                <li><a href="#">购物6</a></li>
                <li><a href="#">购物7</a></li>

            </ul>
        </div>
    </div>
    <div class="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 60px 0 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代码了:  这是最核心的  看不懂的每一行都有注释

var box = document.querySelector('#unit')
var ul = document.querySelector('ul')
var nav = document.querySelector('.nav')
//屏幕宽度
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
//ul的真实宽度
var allWidth = ul.children.length * 70;
ul.style.width = allWidth +'px';
//反弹值
var min = allWidth - (windowWidth - 100 - 60);
var deltaX;
//信号量
var nowX = 100;
//移动数组,用于计算手指抬起时的瞬时速度
var moveAll = [];
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中最后两个坐标间的距离
    var end = moveAll.length - 1;
    var s = moveAll[end] - moveAll[end - 2];
    // s这个距离决定了结束时的瞬时速度,根据s计算一个新的惯性数值
    var target = 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;
});

最后的效果大概是这个效果 看的不太懂得 可以访问聚划算的官网看看人家原来的效果!!!