Paste_Image.png
$(function(){
$(".find_nav_list").css("left",sessionStorage.left+"px");
//用sessionStorage保存上次的信息
$(".find_nav_list li").each(function(){
if($(this).find("a").text()==sessionStorage.pagecount){
$(".sideline").css({left:$(this).position().left});
$(".sideline").css({width:$(this).outerWidth()});
$(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
navName(sessionStorage.pagecount);
return false
}
else{
$(".sideline").css({left:0});
$(".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_l;
var fnl_x = parseInt($(this).position().left);//左边位置
/*
*如果在中轴线左边的，则为0
*如果在需要移动的距离比外面容器的绝对值还大，则移动最大距离为他们的差
*正常移动距离
*/
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);
//保存现在的距离
sessionStorage.left=fnl_l;
var c_nav=$(this).find("a").text();
navName(c_nav);
});
var fl_w=$(".find_nav_list").width(); //导航的总宽度
var flb_w=$(".find_nav_left").width(); // 导航外部div的宽度
$(".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){ //绝对移动的距离大于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();
}
});
});
function navName(c_nav) {
switch (c_nav) {
case "资讯":
sessionStorage.pagecount = "资讯";
break;
case "分析":
sessionStorage.pagecount = "分析";
break;
case "黄页":
sessionStorage.pagecount = "黄页";
break;
case "技术":
sessionStorage.pagecount = "技术";
break;
case "项目":
sessionStorage.pagecount = "项目";
break;
case "股市":
sessionStorage.pagecount = "股市";
break;
case "原创":
sessionStorage.pagecount = "原创";
break;
case "经济":
sessionStorage.pagecount = "经济";
break;
case "评论":
sessionStorage.pagecount = "评论";
break;
}
}
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>发现</title>
<meta name="viewport"
content=" height = device-height,
width = device-width,
initial-scale = 1.0,
minimum-scale = 1.0,
maximum-scale = 1.0,
user-scalable = no"/>
<link rel="stylesheet" href="css.css"/>
<script src="jquery-1.8.3.min.js"></script>
<script src="js.js"></script>
</head>
<body>
<div class="find_nav">
<div class="find_nav_left">
<div class="find_nav_list">
<ul>
<li class="find_nav_cur"><a href="javascript:void(0)">资讯</a></li>
<li><a href="javascript:void(0)">分析</a></li>
<li><a href="javascript:void(0)">原创</a></li>
<li><a href="javascript:void(0)">评论</a></li>
<li><a href="javascript:void(0)">技术</a></li>
<li><a href="javascript:void(0)">项目</a></li>
<li><a href="javascript:void(0)">黄页</a></li>
<li><a href="javascript:void(0)">股市</a></li>
<li><a href="javascript:void(0)">经济</a></li>
<li class="sideline"></li>
</ul>
</div>
</div>
<a class="search_logo" href="">搜索</a>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-overflow-scrolling:touch;overflow-scrolling:touch;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.find_nav {
width: 100%;
height: 45px;
background-color: #f9f9f9;
position: fixed;
top: 0;
z-index: 99;
border-bottom: 1px solid #ddd;
display: -moz-box;
display: -webkit-box;
display: box;
}
.find_nav_left {
height: 46px;
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 13px;
}
.find_nav_list ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 46px;
font-size: 18px;
text-align: center;
color: #666;
}
.find_nav_cur a {
color: #48a5f4 !important;
}
.sideline {
display: block;
position: absolute;
border: 0;
height: 2px;
background-color: #48a5f4;
left: 0;
top: 43px;
pointer-events: none;
}
.search_logo {
display: block;
width: 44px;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 14px;
color: #48a5f4;
}
