前端插件之头部tab栏左右滑动-蒲公英云

前端插件之头部tab栏左右滑动

效果图：

20170901133831094

1.css部分

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        *{margin: 0; padding: 0; box-sizing: border-box; }
        html,body{width: 100%; overflow: hidden;} 
        ul{width: auto;  list-style: none; height: 65px;}
        li{float: left; height: 65px;width: 105px; border: 1px solid #C2C2C2; text-align: center;color: #C2C2C2;
            line-height: 65px; margin-right: 10px;border-radius: 5px;}
        #contentNav{ width:100%; overflow: hidden;margin-left: 5%;}
        .font-red{color: #FFFFFF; background: blue;}
    </style>

2.html部分

<div id="contentNav">
        <ul id="contentNavul">
            <li class="font-red">演讲者模式</li>
            <li>声控模式</li>
            <li>固定画面模式</li>
            <li>轮播图模式</li>
            <li>模式1</li>
            <li>模式2</li>
            <li>模式3</li>
        </ul>
    </div>

3.最主要的是js部分，

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    var hg = window.screen.width;
    var contentNav = document.getElementById("contentNav");
    contentNav.style.width = (hg*0.9) +'px';
    var contentNavul = document.getElementById("contentNavul");
    var ali = contentNavul.getElementsByTagName('li');
    contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';
    function Slide(){
        this.windowWidth = window.screen.width;//屏幕的宽度
        this.divWidth = 0;//每个div宽度
        this.resPlaceX = 0;//最终的位置X
        this.moveDistance = 0;//移动的距离
        this.startTranform = 0;//当前的transform值
         this.startTranformStr = ''//transform字符串
         this.translate3dX = 0;//每次算到的ul移动translate3dX值
         this.disX = 0;//当前div距离屏幕左边距离
        this.startX = 0;//触摸开始的x值
    }
    /*--------------------获取当前transfrom-----------------------------*/
    Slide.prototype.getTransfrom = function(){
        this.startTranformStr = contentNavul.style.transform;
          this.startTranform = this.startTranformStr.slice(this.startTranformStr.indexOf('(') + 1,
                                                  this.startTranformStr.indexOf('px'));
          if (this.startTranform == '') {this.startTranform = 0};
          this.startTranform = parseFloat(this.startTranform); 
    }
    /*--------------------改变当前div到中间-----------------------------*/
    Slide.prototype.changeActive = function(myIndex){
        this.disX = $('li').eq(myIndex).offset().left;//当前div距离屏幕左边距离
        this.divWidth = $('li').eq(myIndex).width();
        this.resPlaceX = (this.windowWidth - this.divWidth) / 2;
        this.moveDistance = this.disX - this.resPlaceX; 
        this.getTransfrom();
          this.translate3dX = this.startTranform + -this.moveDistance
        this.boundaryCondition();
        $('ul').css({
              'transform' : 'translate3d('+ this.translate3dX +'px,0,0)',
              'transition-duration' : '1s'
          });
    }
    /*------------------------边界限制-----------------------------------*/
    Slide.prototype.boundaryCondition = function(){
        if(this.translate3dX > 0){
            this.translate3dX = 0;
        }else if(-this.translate3dX > $('ul').width() - this.windowWidth + hg*0.1 -10){
            this.translate3dX = -($('ul').width() - this.windowWidth + hg*0.1 -10);
        }
    }
    var slide = new Slide();
    $('li').on('click',function(){
        $('li').removeClass('font-red');
        $(this).addClass('font-red');
        slide.changeActive($(this).index());
    });  
    $('ul').on('touchstart',function(e){
        $('ul').css({'transition-duration' : '0s'});
        slide.getTransfrom();
        var touchestartEv = e || event; 
        slide.startX = touchestartEv.touches[0].clientX;
    });
    $('ul').on('touchmove',function(ev){
        var touchmoveEv = ev || event;
        var moveX = touchmoveEv.touches[0].clientX;;
        var translateX = slide.startX - moveX;
        slide.translate3dX = slide.startTranform + -translateX; 
        slide.boundaryCondition();
        console.log(slide.startTranform)
        $('ul').css({
            'transform' : 'translate3d('+ slide.translate3dX +'px,0,0)'
        })
    });
</script>