导航 滑动 效果 代码

 

 

<!--导航start-->
   <div id="nav">
       <ul class="wrap">
           <li class="active">
               <a href="javascript:">首页</a>
           </li>
           <li >
               <a href="javascript:">MV</a>
           </li>
           <li  >
               <a href="javascript:">悦单</a>
           </li>
           <li>
               <a href="javascript:">V榜</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:">APP下载</a>
           </li>
           <li>
               <a href="javascript:">热门应用</a>
           </li>
       </ul>
   </div>
<!--导航end-->

#main{
  width:100%;
  padding-top: 270/@font-size;
  #nav{
    box-sizing: border-box;
    height:177/@font-size;
    padding-top: 31/@font-size;
    padding-bottom: 14/@font-size;
    overflow: hidden;
    .wrap{
      position: absolute;
      white-space: nowrap;
      font-size: 0;
      li{
        display:inline-block;
        height:129/@font-size;
        line-height:129/@font-size;
        font-size: 67.5/@font-size;
        padding:  0 38/@font-size;
        a{
          color: #020202;
        }
        &.active{
          font-weight:bold;">#690;
          a{
            color: #fff;
          }
        }
      }
    }
  }
}

// 导航区域
(function(){
    var nav = document.querySelector('#nav');
    var wrap = nav.querySelector('.wrap');
    // 标识当前 导航是否正在滑动
    var isMoving = false;

    nav.addEventListener('touchstart',function(e){
        // 移除过渡
        wrap.style.transition = 'none';
        // 获取起始点触点位置
        this.x = e.touches[0].clientX;
        // 当前包裹元素的偏移量
        this.left = transformCSS(wrap,'translateX');
        // 获取触摸开始的时间
        this.startTime = Date.now();
    });
    nav.addEventListener('touchmove',function(e){
        this._x = e.touches[0].clientX;
        var newleft = this._x - this.x + this.left;
        // 判断 越界
        if(newleft > 0){
            newleft = (this._x - this.x) / 2
        }
        // 计算最小的 translatex 的值
        var minTranslateX = nav.offsetWidth -  wrap.offsetWidth;
        if(newleft < minTranslateX){
            newleft = minTranslateX + (this._x - this.x) / 2
        }
        transformCSS(wrap,'translateX',newleft);

        // 修改当前变量的值
        isMoving = true;
    }); 
    // 绑定触摸结束事件
    nav.addEventListener('touchend',function(e){
        // 获取当前 包裹元素的translateX的值
        var translateX = transformCSS(wrap, 'translateX');

        // 获取触摸的位移
        this._x = e.changedTouches[0].clientX;
        // 计算位移
        var disX =  this._x - this.x;
        // 获取触摸结束的时间
        this.endTime = Date.now();
        var disTime = this.endTime - this.startTime;
        // 计算时间差
        var v = disX / disTime;
        // 通过v 求位移
        var s = v * 100;

        translateX += s;
        // 过渡的切换
        wrap.style.transition = 'ease-out .5s';
        transformCSS(wrap, 'translateX', translateX);


        // 判断位置是否越界
        if(translateX > 0){
            //增加过渡
            wrap.style.transition = ' cubic-bezier(.21,.68,.42,1.77) .5s';
            transformCSS(wrap, 'translateX', 0);
        }

        // 计算最小的 translatex 的值
        var minTranslateX = nav.offsetWidth -  wrap.offsetWidth;
        if(translateX < minTranslateX){
            //增加过渡
            wrap.style.transition = ' cubic-bezier(.21,.68,.42,1.77) .5s';
            transformCSS(wrap, 'translateX',minTranslateX);
        }

        // 修改当前变量的值
        isMoving = false;

    });

    // 获取导航元素
    var navItems = nav.querySelectorAll('li');
    // 绑定事件
    navItems.forEach(function(item){
       item.addEventListener('touchend',function(){
           if(isMoving) return;
           // class 切换
           navItems.forEach(function(v){
                // 移除每一个 导航元素的class
               v.classList.remove('active');
           });
           // 当前点击元素增加 active 类名
           this.classList.add('active');
       })
    })
}());

----------------


transformCSS.js

/*
    函数
    transformCSS

    作用
    1. 快速设置元素的 transform 变形   ele.style.transform = 'translateX(100px)';
    transformCSS(ele, 'translateX', 100);
    transformCSS(ele, 'translateY', 100);
    transformCSS(ele, 'rotate', 50);
    transformCSS(ele, 'scale', 2);
    transformCSS(ele, 'scaleY', 1);


    2. 读取元素 transform 变形值
    transformCSS(ele, 'translateX'); // 100
    transformCSS(ele, 'rotate'); // 50

    prop  property 属性
    val   value    属性值

    #box{
        left:100px;

        transform: translateX(100px)
    }



 */
/**
 *
 * @param el     元素对象
 * @param prop   变形的样式
 * @param val    变形的样式值
 *
 * 多次的设置 需要保存前面的样式
 * translateX  100
 * rotate      45
 *
 */
// transformCSS(box, 'translateX', 200);
// var styles = {};//  {translateX: 100}

//
(function (w) {

    function transformCSS(el, prop, val) {
        //初始化样式仓库
        if (el.store === undefined) {
            el.store = {};
        }
        //设置
        if (arguments.length == 3) {
            el.style.transform = prop + '(' + val + 'px)';

            //向对象中存入参数
            el.store[prop] = val;
            //设置样式
            /**
             *
             * {translateX: 200, rotate: 45, scale: 3}
             ||
             ||
             ||
             \/
             transform: translateX(200px)  rotate(45deg)  scale(3);
             */
            var str = '';
            for (var i in el.store) {
                // i  translateX  rotate scale
                // styles[i]  200    45    3
                switch (i) {
                    case 'translateX':
                    case 'translateY':
                    case 'translateZ':
                        str += i + '(' + el.store[i] + 'px) ';
                        break;
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                    case 'rotateZ':
                        str += i + '(' + el.store[i] + 'deg) ';
                        break;

                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                    case 'scaleZ':
                        str += i + '(' + el.store[i] + ') ';
                        break;
                }
                //设置变形样式
                el.style.transform = str;
            }
        }

        //样式读取
        if (arguments.length == 2) {
            //判断 如果设置了 则返回设置的值
            if (el.store[prop]) {
                return el.store[prop];
            }
            //如果没有设置  translate  rotate  0   scale  1  scaleX  scaleY  scaleX  scale
            //判断样式是否以 scale 开头
            var start = prop.substr(0, 5);
            if (start === 'scale') {
                return 1;
            } else {
                return 0;
            }
        }
    }

    w.transformCSS = transformCSS;

})(window);