导航条实例(哔哩哔哩部分)

最新推荐文章于 2022-10-11 21:30:14 发布
维克多噗噗
最新推荐文章于 2022-10-11 21:30:14 发布
阅读量2.4k
点赞数
分类专栏：操练 jq
jq 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
操练
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>bilibili导航条</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
        #header,#footer {width: 1000px; height: 800px; line-height: 800px; margin: 0 auto; text-align: center; border: 1px solid #ddd;}
        #content {position: relative; width: 1002px; margin: 0 auto;}
        #content .nav {width: 1000px; height: 500px; border: 1px solid #ddd;}
        #content .slide-wrap {position: absolute; right: -60px; width: 52px;}
        #slide {position: fixed; top: 235px; width: 50px; height: 500px; background: #f6faf9; border: 1px solid #ddd; border-radius: 5px;}
        #slide li {position: relative; width: 50px; height: 32px; line-height: 32px; text-align: center; font-size: 12px; z-index: 2; cursor: pointer;}
        #slide li:hover {background: #00A1D6; color: #fff;}
        #slide li.on {background: #00A1D6; color: #fff;}
        #slide li.blue {display: none; position: absolute; top: 0; background: #00A1D6; z-index: 1;}
    </style>
    <script src="jquery-1.12.1.min.js"></script>
</head>
<body>
    <div id="header">header</div>
    <div id="content">
        <div class="nav">动画</div>
        <div class="nav">音乐</div>
        <div class="nav">舞蹈</div>
        <div class="nav">番剧</div>
        <div class="nav">科技</div>
        <div class="nav">娱乐</div>
        <div class="nav">鬼畜</div>
        <div class="nav">电影</div>
        <div class="nav">TV剧</div>
        <div class="nav">直播</div>
        <div class="nav">时尚</div>
        <div class="nav">游戏</div>
        <div class="slide-wrap">
            <div id="slide">
                <ul>
                    <li class="control">动画</li>
                    <li class="control">音乐</li>
                    <li class="control">舞蹈</li>
                    <li class="control">番剧</li>
                    <li class="control">科技</li>
                    <li class="control">娱乐</li>
                    <li class="control">鬼畜</li>
                    <li class="control">电影</li>
                    <li class="control">TV剧</li>
                    <li class="control">直播</li>
                    <li class="control">时尚</li>
                    <li class="control">游戏</li>
                    <li class="blue"></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">footer</div>
    <script type="text/javascript">
        // 解决slide定位问题
        (function(){
            var $slide = $("#slide");
            var sildeH = $slide.height();
            var minus = ($(window).height()-sildeH)/2;
            minus = Math.max(minus,0);
            $(window).resize(function(){//页面高度变化.
                minus = ($(window).height()-sildeH)/2;//minus可能小于0==> 页面高度小于slide高度.
                minus = Math.max(minus,0); //取最大值.
                $slide.css("top",minus+"px");
            }).scroll(function(){//页面滚动.让slide 居中
                if($(this).scrollTop() > 100){
                    $slide.css("top",minus+"px");
                }else{
                    $slide.css("top","230px");
                }
            })
        })();

        // 导航条操作.
        (function(){
            var $control = $("#slide .control"),
                height = $control.height(),
                $nav = $("#content .nav"),
                length = $nav.length,
                index = 0,
                $blue = $("#slide .blue"),
                mark = true;
            // slide的点击跳转.
            $control.click(function(){
                mark = !mark;
                var This = this;
                index = $(this).index();
                // 替换样式.
                $(this).addClass("on").siblings().removeClass("on");
                // 跳转.
                $("body,html").stop().animate({//会执行两次
                    "scrollTop" : $nav.eq(index).offset().top+"px"
                },300);
                // 小块跟随.
                $blue.show().stop().animate({
                    top : height*index+"px"
                },300,function(){
                    $(this).hide();
                    // 跳转结束让开关开启
                    mark = !mark;
                });
            });
            // 页面滚动,让slide跟随.
            $(window).scroll(function(){
                // 点击跳转时不用检测.
                if(mark){
                    for (var i = 0; i < length; i++) { //检测滚轮高度
                        if($nav.eq(i).offset().top > $(this).scrollTop()){ // 让上一个control 显示.
                            index = i-1;
                            if(index<0){ //i=0时.  不显示.
                               index=0;
                               $control.removeClass("on");
                            }else{ //当i>=1时. 才开始显示.
                                $control.eq(index).addClass("on").siblings().removeClass("on");
                                // $blue 同步.
                                $blue.css("top",height*index+"px");
                            }

                            break;//检测到一个就退出.
                        }
                    }
                    // 最后一个.
                    if($nav.last().offset().top < $(this).scrollTop()){
                        $control.last().addClass("on").siblings().removeClass("on");
                        // $blue 同步.
                        $blue.css("top",(length-1)*index+"px");
                    }
                }
            })
        })();
    </script>
</body>
</html>