<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>jQuery手机触屏Tab选项卡代码 - 注释版</title>
<style type="text/css">
body,
td,
th,
ul,
li {
padding: 0;
margin: 0;
}
a {
color: #333;
text-decoration: none;
cursor: pointer;
}
.find_nav {
width: 100%;
height: 70px;
background-color: #f9f9f9;
position: fixed;
top: 0;
z-index: 9999;
border-bottom: 1px solid #ddd;
display: -moz-box;
display: -webkit-box;
display: box;
}
.find_nav_left {
height: 70px;
position: relative;
overflow: hidden;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.find_nav_list {
position: absolute;
left: 0;
}
.find_nav_list ul {
position: relative;
white-space: nowrap;
font-size: 0;
}
.find_nav_list ul li {
display: inline-block;
padding: 0;
margin: 0 20px;
}
.find_nav_left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 70px;
font-size: 24px;
text-align: center;
color: #666;
}
.find_nav_cur a {
color: #48a5f4 !important;
}
.find_nav_list a.active {
color: #c00
}
.sideline {
display: block;
position: absolute;
border: 0;
height: 2px;
background-color: #48a5f4;
left: 0;
top: 68px;
pointer-events: none;
}
.li_list {
min-height: 800px;
font-size: 40px;
line-height: 800px;
color: #fff;
text-align: center;
}
.swipe {
padding: 70px 0 0 0;
}
</style>
</head>
<body>
<div class="find_nav">
<div class="find_nav_left">
<div class="find_nav_list" id="pagenavi1">
<ul>
<li><a href="#" class="active">第一个</a></li>
<li><a href="#">第二个字数长一点</a></li>
<li><a href="#">第三个</a></li>
<li class="sideline"></li>
</ul>
</div>
</div>
</div>
<div id="slider1" class="swip">
<ul class="box01_list">
<li class="li_list" style="background:#333">1</li>
<li class="li_list" style="background:#75b140">2</li>
<li class="li_list" style="background:#4053b1">3</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
<script type="text/javascript">
// 初始化
var fl_w = $(".find_nav_list").width();
var flb_w = $(".find_nav_left").width();
$(".find_nav_list li").each(function () {
$(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
})
var nav_w = $(".find_nav_list li").first().width();
$(".sideline").width(nav_w);
$(".find_nav_list li").on("click", function () {
// 点击样式的替换
nav_w = $(this).width();
$(".sideline").stop(true);
$(".sideline").animate({ left: $(this).position().left }, 300);
$(".sideline").animate({ width: nav_w });
$(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
// 内容超出时导航栏自动滑动
var fn_w = ($(".find_nav").width() - nav_w) / 2;
var fnl_1;
var fnl_x = parseInt($(this).position().left);
if (fnl_x <= fn_w) {
fnl_l = 0;
} else if (fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
} else {
fnl_l = fn_w - fnl_x;
}
$(".find_nav_list").animate({
"left": fnl_l
}, 300);
});
// 设置导航栏可触屏滑动
var x1, y1, ty_left;
$(".find_nav_list").on('touchstart', function (e) {
var touch1 = e.originalEvent.targetTouches[0];
x1 = touch1.pageX;
y1 = touch1.pageY;
ty_left = parseInt($(this).css("left"));
});
$(".find_nav_list").on('touchmove', function (e) {
var touch2 = e.originalEvent.targetTouches[0];
var x2 = touch2.pageX;
var y2 = touch2.pageY;
if (ty_left + x2 - x1 >= 0) {
$(this).css("left", 0);
} else if (ty_left + x2 - x1 <= flb_w - fl_w) {
$(this).css("left", flb_w - fl_w);
} else {
$(this).css("left", ty_left + x2 - x1);
}
if (Math.abs(y2 - y1) > 0) {
e.preventDefault();
}
});
var page = 'pagenavi1';
// var mslide = 'slider1';
// var mtitle = 'emtitle1';
// arrdiv = 'arrdiv1';
var as = document.getElementById(page).getElementsByTagName('a');
var tt = new TouchSlider({
id: 'slider1', 'auto': '-1', fx: 'ease-out', direction: 'left', speed: 600, timeout: 5000, 'before': function (index) {
// 取消传参
// var as = document.getElementById(this.page).getElementsByTagName('a');
// as[this.p].className = '';
// this.p = index;
// 出发导航栏点击样式的替换
var as = document.getElementById(page).getElementsByTagName('a');
as[0].className = '';
fnl_x = parseInt($(".find_nav_list li").eq(index).position().left);
nav_w = $(".find_nav_list li").eq(index).width();
$(".sideline").stop(true);
$(".sideline").animate({ left: $(".find_nav_list li").eq(index).position().left }, 300);
$(".sideline").animate({ width: nav_w }, 100);
$(".find_nav_list li").eq(index).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
// 内容超出时导航栏自动滑动
var fn_w = ($(".find_nav").width() - nav_w) / 2;
var fnl_l;
if (fnl_x <= fn_w) {
fnl_l = 0;
} else if (fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
} else {
fnl_l = fn_w - fnl_x;
}
$(".find_nav_list").animate({
"left": fnl_l
}, 300);
}
});
// 传参
// tt.page = page;
// tt.p = 0;
//console.dir(tt); console.dir(tt.__proto__);
// 关联点击事件和滑动事件：点击（onclick）的时候出发滑动（slide）
for (var i = 0; i < as.length; i++) {
(function () {
var j = i;
as[j].tt = tt;
as[j].onclick = function () {
this.tt.slide(j);
return false;
}
})();
}
// 关联点击事件和滑动事件--方法二
// for (var i = 0; i < as.length; i++) {
// as[i].tt = tt;
// as[i].index = i;
// as[i].onclick = function () {
// console.log(i);
// console.log(this.index);
// this.tt.slide(this.index);
// return false;
// }
// }
</script>
</body>
</html>注意：需要加载两个js
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/touchslider.js"></script>
请自行百度下载
