移动端网页纯原生js选项卡tab切换

太过爱你忘了你带给我的痛 2022-06-09 08:42 190阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>适合移动网页纯原生js选项卡tab切换</title>
    <style>
        *{ margin: 0; padding: 0}
        ul,li{ list-style: none}
        .tabClick{ background: #f3f3f3; overflow: hidden}
        .tabClick li{ height:40px; line-height: 40px; width: 25%; float: left; text-align: center}
        .tabClick li.active{ color: #099; transition: 0.1s; font-weight: bold}
        .tabCon{ overflow: hidden}
        .tabBox{ position: relative}
        .tabList{word-break: break-all; width:100%;float:left; line-height:100px; text-align:center; color:#D3D3D3; font-size:36px; font-family: "Arial Black"}
        .lineBorder{ height: 2px; overflow: hidden; border-bottom:1px solid #099; background: #f3f3f3}
        .lineDiv{ background: #099; height: 2px; width: 25%;}
    </style>
    <body>
    
    <div class="wrap" id="wrap">
        <ul class="tabClick">
            <li class="active">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
            <li>Tab4</li>
        </ul>
        <div class="lineBorder">
            <div class="lineDiv"></div>
        </div>
        <div class="tabCon">
            <div class="tabBox">
                <div class="tabList">
                1</div>
                <div class="tabList">
                2</div>
                <div class="tabList">
                3</div>
                <div class="tabList">
                4</div>
            </div>
        </div>
    </div>
    <script charset="utf-8">
    	window.onload = function (){
            var windowWidth = document.body.clientWidth; //window 宽度;
    		var wrap = document.getElementById('wrap');
            var tabClick = wrap.querySelectorAll('.tabClick')[0];
            var tabLi = tabClick.getElementsByTagName('li');
            
            var tabBox =  wrap.querySelectorAll('.tabBox')[0];
            var tabList = tabBox.querySelectorAll('.tabList');
            
            var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
            var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];
            
            var tar = 0;
            var endX = 0;
            var dist = 0;
            
            tabBox.style.overflow='hidden';
            tabBox.style.position='relative';
            tabBox.style.width=windowWidth*tabList.length+"px";
            
            for(var i = 0 ;i<tabLi.length; i++ ){
                  tabList[i].style.width=windowWidth+"px";
                  tabList[i].style.float='left';
                  tabList[i].style.float='left';
                  tabList[i].style.padding='0';
                  tabList[i].style.margin='0';
                  tabList[i].style.verticalAlign='top';
                  tabList[i].style.display='table-cell';
            }
            
            for(var i = 0 ;i<tabLi.length; i++ ){
                tabLi[i].start = i;
                tabLi[i].onclick = function(){
                    var star = this.start;
                    for(var i = 0 ;i<tabLi.length; i++ ){
                        tabLi[i].className='';
                    };
                    tabLi[star].className='active';
                    init.lineAnme(lineDiv,windowWidth/tabLi.length*star)
                    init.translate(tabBox,windowWidth,star);
                    endX= -star*windowWidth;
                }
            }
            
            function OnTab(star){
                if(star<0){
                    star=0;
                }else if(star>=tabLi.length){
                    star=tabLi.length-1
                }
                for(var i = 0 ;i<tabLi.length; i++ ){
                    tabLi[i].className='';
                };
                
                 tabLi[star].className='active';
                init.translate(tabBox,windowWidth,star);
                endX= -star*windowWidth;
            };
            
            tabBox.addEventListener('touchstart',chstart,false);
            tabBox.addEventListener('touchmove',chmove,false);
            tabBox.addEventListener('touchend',chend,false);
            //按下
            function chstart(ev){
                ev.preventDefault;
                var touch = ev.touches[0];
                tar=touch.pageX;
                tabBox.style.webkitTransition='all 0s ease-in-out';
                tabBox.style.transition='all 0s ease-in-out';
            };
            //滑动
            function chmove(ev){
                var stars = wrap.querySelector('.active').start;
                ev.preventDefault;
                var touch = ev.touches[0];
                var distance = touch.pageX-tar;
                dist = distance;
                init.touchs(tabBox,windowWidth,tar,distance,endX);
                init.lineAnme(lineDiv,-dist/tabLi.length-endX/4);
            };
            //离开
            function chend(ev){
                var str= tabBox.style.transform;
                var strs = JSON.stringify(str.split(",",1));  
                endX = Number(strs.substr(14,strs.length-18)); 
                
                if(endX>0){
                    init.back(tabBox,windowWidth,tar,0,0,0.3);
                    endX=0
                }else if(endX<-windowWidth*tabList.length+windowWidth){
                    endX=-windowWidth*tabList.length+windowWidth
                    init.back(tabBox,windowWidth,tar,0,endX,0.3);
                }else if(dist<-windowWidth/3){
                     OnTab(tabClick.querySelector('.active').start+1);
                     init.back(tabBox,windowWidth,tar,0,endX,0.3);
                }else if(dist>windowWidth/3){
                     OnTab(tabClick.querySelector('.active').start-1);
                }else{
                     OnTab(tabClick.querySelector('.active').start);
                }
                var stars = wrap.querySelector('.active').start;
                init.lineAnme(lineDiv,stars*windowWidth/4);
                
            };
    	};
    	
        var init={
            translate:function(obj,windowWidth,star){
                obj.style.webkitTransform='translate3d('+-star*windowWidth+'px,0,0)';
                obj.style.transform='translate3d('+-star*windowWidth+',0,0)px';
                obj.style.webkitTransition='all 0.3s ease-in-out';
                obj.style.transition='all 0.3s ease-in-out';
            },
            touchs:function(obj,windowWidth,tar,distance,endX){
                obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
                obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
            },
            lineAnme:function(obj,stance){
                obj.style.webkitTransform='translate3d('+stance+'px,0,0)';
                obj.style.transform='translate3d('+stance+'px,0,0)';
                obj.style.webkitTransition='all 0.1s ease-in-out';
                obj.style.transition='all 0.1s ease-in-out';
            },
            back:function(obj,windowWidth,tar,distance,endX,time){
                obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
                obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
                obj.style.webkitTransition='all '+time+'s ease-in-out';
                obj.style.transition='all '+time+'s ease-in-out';
            },
        }
        
    </script>
    
    
    </body>
    </html>