触屏Tab选项卡实现-优快云博客

本文链接：https://blog.youkuaiyun.com/u012764368/article/details/48595445
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="renderer" content="webkit"><!-- 让国内浏览器采用IE高速模式-->
    <title>触屏tab选项卡</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="tab_wrap">
    <div class="tab">
        <ul>
            <li>标题1</li>
            <li>标题2</li>
            <li>标题3</li>
            <li>标题4</li>
            <div class="clear"></div>
        </ul>
    </div>
    <div class="tabbox">
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
            <div class="clear"></div>
        </ul>
    </div>
</div>
<p class="txt"></p>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
       var li_w = $(window).width()-20;
       var box_li = $(".tabbox").find("li");
       var tabbox = $(".tabbox");
       var ul_w = box_li.length*li_w;
       box_li.width(li_w);
       tabbox.find("ul").width(ul_w);

       $(".tab").find("li").eq(0).addClass("check");
       $(".tab").find("li").click(function(){
            var index = $(this).index();
            var newLeft = index*box_li.width();
            $(".tabbox").find("ul").css({
                "-webkit-transform":"translateX("+-newLeft+"px"+")",  //CSS3 新属性transform
                "-moz-transform":"translateX("+-newLeft+"px"+")",
                "-ms-transform":"translateX("+-newLeft+"px"+")",
                "-o-transform":"translateX("+-newLeft+"px"+")",
                "transform":"translateX("+-newLeft+"px"+")"
            });
            $(".tab").find("li").eq(index).addClass("check").siblings().removeClass("check");
       });

       var startX,endX; //创建初始变量
       tabbox.find("li").bind("touchstart",function(){ //绑定touchstart事件
           var $this = $(this);
           var index = $this.index();
           var ul_left = parseInt(tabbox.find("ul").position().left);
           var touchs = event.touches[0];
           startX = touchs.pageX;  //手指起始位置
           $this.bind("touchmove",function(){  //绑定touchmove事件
               event.preventDefault();
               var touchs = event.touches[0];
               endX = touchs.pageX - startX; //手指位置-起止位置=滑动距离
               if(index!=0){  //如果不是第一个
                   if(endX > 0){ //向右滑动
                       $(".tab").find("li").eq(index-1).addClass("check").siblings().removeClass("check");
                       var newLeft = (index-1)*parseInt($(".tabbox").width());
                       $(".tabbox").find("ul").css({
                           "-webkit-transform":"translateX("+-newLeft+"px"+")",
                           "-moz-transform":"translateX("+-newLeft+"px"+")",
                           "-ms-transform":"translateX("+-newLeft+"px"+")",
                           "-o-transform":"translateX("+-newLeft+"px"+")",
                           "transform":"translateX("+-newLeft+"px"+")"
                       });
                   }
               }
               if((index+1) != tabbox.find("li").length){  //如果不是最后一个
                    if(endX < 0){ //向左
                        $(".tab").find("li").eq(index+1).addClass("check").siblings().removeClass("check");
                        var newLeft = (index+1)*parseInt($(".tabbox").width());
                        $(".tabbox").find("ul").css({
                            "-webkit-transform":"translateX("+-newLeft+"px"+")",
                            "-moz-transform":"translateX("+-newLeft+"px"+")",
                            "-ms-transform":"translateX("+-newLeft+"px"+")",
                            "-o-transform":"translateX("+-newLeft+"px"+")",
                            "transform":"translateX("+-newLeft+"px"+")"
                        });
                    }
               }
           })
       });
        tabbox.find("li").bind('touchend', function () {
            tabbox.find("li").off('touchmove touchend');
       });
    })
</script>
</body>
</html>