利用touchslide实现tab滑动切换
2024-08-30 06:25:36
<!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">
<style type="text/css">
body,td,th,ul,li{
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
padding:;
margin:;
}
a{
color: #;
text-decoration:none;
cursor:pointer;
}
.find_nav {
width: %;
height: 50px;
background-color: #f9f9f9;
position: fixed;
top: ;
z-index: ;
border-bottom: 1px solid #ddd;
display: -moz-box;
display: -webkit-box;
display: box;
}
.find_nav_left {
height: 50px;
position: relative;
overflow: hidden;
-moz-box-flex: ;
-webkit-box-flex: ;
box-flex: ;
}
.find_nav_list {
position: absolute;
left: ;
}
.find_nav_list ul {
position: relative;
white-space: nowrap;
font-size: ;
}
.find_nav_list ul li {
display: inline-block;
padding: ;
margin: 20px;
}
.find_nav_list ul li a {
display: block;
width: %;
height: %;
line-height: 50px;
font-size: 14px;
text-align: center;
color: #;
}
.find_nav_cur a {
color: #48a5f4 !important;
}
.find_nav_list a.active{ color:#C00}
.sideline {
display: block;
position: absolute;
border: ;
height: 2px;
background-color: #48a5f4;
left: ;
top: 48px;
pointer-events: none;
}
.li_list{ min-height:800px; font-size:40px; line-height:800px; color:#fff; text-align:center}
.swipe{ padding:70px ;}
</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><a href="#">律师</a></li>
<li><a href="#">贷款</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">融资</a></li>
<li><a href="#">顾问</a></li>
<li><a href="#">公关</a></li>
<li><a href="#">培训</a></li>
<li class="sideline"></li>
</ul>
</div>
</div>
</div>
<div id="slider1" class="swipe">
<ul class="box01_list">
<li class="li_list" style="background:#db7575"></li>
<li class="li_list" style="background:#75b140"></li>
<li class="li_list" style="background:#b16b40"></li>
<li class="li_list" style="background:#4053b1"></li>
<li class="li_list" style="background:#b14080"></li>
<li class="li_list" style="background:#4dd1b3"></li>
<li class="li_list" style="background:#bea30e"></li>
<li class="li_list" style="background:#865bb3"></li>
<li class="li_list" style="background:#69b03f"></li>
<li class="li_list" style="background:#c25e28"></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="touchslider.js"></script>
<script type="text/javascript">
$(".find_nav_list").css("left",); $(".find_nav_list li").each(function(){
$(".sideline").css({left:});
$(".find_nav_list li").eq().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);
//position()方法返回匹配元素相对于父元素的位置（偏移）
$(".sideline").animate({left:$(this).position().left},);
$(".sideline").animate({width:nav_w});
$(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
//（375-当前点击元素的宽度）/2
var fn_w = ($(".find_nav").width() - nav_w) / ;
var fnl_l;
var fnl_x = parseInt($(this).position().left);
if (fnl_x <= fn_w) {
fnl_l = ;
} 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
}, ); });
var fl_w=$(".find_nav_list").width();//
var flb_w=$(".find_nav_left").width();//
$(".find_nav_list").on('touchstart', function (e) {
var touch1 = e.originalEvent.targetTouches[];
x1 = touch1.pageX;
y1 = touch1.pageY;
ty_left = parseInt($(this).css("left"));
});
$(".find_nav_list").on('touchmove', function (e) {
var touch2 = e.originalEvent.targetTouches[];
var x2 = touch2.pageX;
var y2 = touch2.pageY;
if(ty_left + x2 - x1>=){
$(this).css("left", );
}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)>){
e.preventDefault();
}
}); var page='pagenavi1';
var mslide='slider1';
var as=$('#pagenavi1').find('a');
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:,timeout:,before:function(index){
//as[this.p]:前一个a标签
as[this.p].className='';
//this.p:下标，前一个a标签的下标
//index：当前下标
this.p=index;
fnl_x = parseInt($(".find_nav_list li").eq(this.p).position().left);
var li_height=$(".swipe").find('li').eq(this.p).height();
$('.swipe').css('height',li_height);
nav_w=$(".find_nav_list li").eq(this.p).width();
$(".sideline").stop(true);
$(".sideline").animate({left:$(".find_nav_list li").eq(this.p).position().left},);
$(".sideline").animate({width:nav_w},);
$(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
var fn_w = ($(".find_nav").width() - nav_w) / ;
var fnl_l;
if (fnl_x <= fn_w) {
fnl_l = ;
} 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
}, );
}});
tt.page = page;
tt.p = ;
//点击a对应的li内容显示
for(var i=;i<as.length;i++){
(function(){
var j=i;
as[j].tt = tt;
as[j].onclick=function(){
this.tt.slide(j);
return false;
}
})();
}
</script>
</body>
</html>
效果：
链接资料：http://www.bcty365.com/demo-13-530-2.html
最新文章
- Java中GC的工作原理
- php课程---JavaScript与Jquery的区别（转）
- do-while语句
- 毫秒数转换为指定格式日期的js代码
- JS 实现中英文翻译
- ibatis.net 多线程的调试
- 1027: [JSOI2007]合金 - BZOJ
- iOS 6分享列表——UIActivityViewController详解
- Dating with girls(1)(二分+map+set)
- 解决MOSS列表匿名访问问题
- 前端面试题(4)iframe有哪些优点？iframe缺点是什么？
- 【转载】SQL Server中的Merge关键字
- Appium之开发计算器自动化测试脚本Demo
- vue设置初始对象时为空报错
- Python之多进程&异步并行
- bcdboot(引导修复工具) 命令行工具使用方法
- apc
- IIS站点工作原理与ASP.NET工作原理
- 使用NetHogs监控进程网络使用情况
- Django项目关闭debug模式后,静态文件无法加载的解决办法