手机头部搜索栏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;

}

$(function(){

$(".find_nav_list").css("left",sessionStorage.left+"px");

$(".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);

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();

$(".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();

}

});

});

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;

}

}

• 资讯
• 分析
• 原创
• 评论
• 技术
• 项目
• 黄页
• 股市
• 经济

搜索