本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • html5移动端Tab选项卡切换代码
    时间:2019-12-03 14:08 来源:开源之家 作者:开源之家测试提供 下载:112 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:1.99 KB
    • 运行环境:HTML
    • 下载次数:112 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    html5移动端Tab选项卡切换代码

    特效描述:html5移动端 Tab选项卡切换,html5移动端Tab选项卡切换代码

    代码结构

    1. HTML代码

    <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>
        <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>

    html5移动端Tab选项卡切换代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信