触屏tab选项卡

来源：互联网发布：淘宝一元商品怎么赚钱编辑：程序博客网时间：2024/06/06 00:46
<!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>
0 0