原生js写头部tab栏左右滑动支持移动端-蒲公英云

原生js写头部tab栏左右滑动支持移动端

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的；

1.css

*{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;list-style:none}
            html,body{width: 100%; overflow: hidden;} 
            #contentNav{width: 100%;margin-left:20px;height: 67px;overflow: hidden;}
            #contentNavul {height: 100%;transition: all ease 0s;}
            #contentNavul li{float: left;height: 65px;width: 105px; border: 1px solid #CCCCCC; text-align: center;
                color: #CCCCCC;line-height: 65px; margin-right: 10px;border-radius: 5px;font-size: 14px;}
            #contentNavul li.selected{background: blue;color: #FFFFFF}

2.html

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

3.原生js

var hg = window.screen.width;
            var contentNav = document.getElementById("contentNav");
            contentNav.style.width = (hg-40) +'px';
            var contentNavul = contentNav.getElementsByTagName('ul')[0];
            var ali = contentNavul.getElementsByTagName('li');
            contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';
            for (var i=0;i<ali.length;i++) {
                ali[i].index=i;
                ali[i].οnclick=function(){
                    for (var j=0;j<ali.length;j++) {
                        ali[j].className="";
                    }
                    ali[this.index].className="selected";
                                        tocenter(this.index); 
            };
                        function tocenter(index){
                var disX = ali[index].offsetLeft;//当前div距离屏幕左边距离
                var divWidth = ali[index].offsetWidth;
                var resPlaceX = (hg - divWidth) / 2;
                var moveDistance = disX - resPlaceX; 
                var a=getmarginleft(contentNavul.style.marginLeft);
                  var translateX = a + -moveDistance;
                  console.log(translateX)
                var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
                if(translateX > 0){
                    translateX = 0;
                }
                if(translateX < 0){
                    if(-translateX > maxleft){
                        translateX = -maxleft;
                    }else{
                        translateX = translateX;
                    }
                }
                contentNavul.style.marginLeft = translateX  +"px";
               }
            function getmarginleft(a){
                a=a.slice(a.indexOf('(') + 1,a.indexOf('px'));
                  if (a == '') {a = 0};
                  a= parseFloat(a); 
                  return a;
            }
            var startX=0;
            var a=0;
            contentNavul.ontouchstart=function(e){
                var touchestartEv = e || event; 
                startX = touchestartEv.touches[0].clientX;
                a=getmarginleft(contentNavul.style.marginLeft);
            }
            contentNavul.ontouchmove=function(ev){
                var touchmoveEv = ev || event;
                var moveX = touchmoveEv.touches[0].clientX;;
                var translateX =startX - moveX - a;
                var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
                if(translateX > maxleft){
                    translateX = maxleft;
                }
                if(translateX < 0){
                    translateX = 0;
                }
                console.log(translateX);
                contentNavul.style.marginLeft = "-" + translateX  +"px";
            }