您的位置：首页 > Web前端 > JavaScript

触屏tab选项卡

2015-09-20 11:11 661 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html javascript
相关文章推荐
新的分享
章节导航