移动端
0

手机端头部导航栏可滑动

by chuang_wei · 2016年9月7日

<!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"/>
    <style>
        *{
            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;
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js.js">
        $(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;
            }
        }
    </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>

You may also like...

发表评论取消回复

要发表评论，您必须先登录。