仿百度百科页面快捷导航


效果如图:

仿百度百科页面快捷导航

示例代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <!--<link rel="stylesheet" href="bd.css">-->
    <link rel="stylesheet" href="baidu.css">
    <!--<link rel="stylesheet" href="http://baike.bdimg.com/static/lemma/pkg/baseviewcss3_d011b287.css">-->

    <style>
        * {
            margin: 0;
            padding: 0
        }

        .wrap {
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }

        .content {
            width: 780px;
            float: left;
        }

        .slide {
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
<div class="wrap">
<div class="content">
    <h2 class="headline-1">
        <a class="anchor-1" name="1"></a>
        <span class="headline-1-index">1</span>
        <span class="headline-content">part1</span>
    </h2>

    <div class="para">
        content1,content1
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="2"></a>
        <span class="headline-2-index">2</span>
        <span class="headline-content">part2</span>
    </h2>

    <div class="para">
        content2,content2
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-2">
        <a class="anchor-2" name="2-1"></a>
        <!--<span class="headline-2-index">2-1</span>-->
        <span class="headline-content">part2-1</span>
    </h2>

    <div class="para">
        content2-1,content2-1
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-2">
        <a class="anchor-2" name="2-2"></a>
        <!--<span class="headline-1-index">2-2</span>-->
        <span class="headline-content">part2-2</span>
    </h2>

    <div class="para">
        content2-2,content2-2
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="3"></a>
        <span class="headline-1-index">3</span>
        <span class="headline-content">part3</span>
    </h2>

    <div class="para3">
        content,content
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="4"></a>
        <span class="headline-1-index">4</span>
        <span class="headline-content">part4</span>
    </h2>

    <div class="para4">
        content,content
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="5"></a>
        <span class="headline-1-index">5</span>
        <span class="headline-content">part5</span>
    </h2>

    <div class="para">
        content5,content5
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="6"></a>
        <span class="headline-1-index">6</span>
        <span class="headline-content">part6</span>
    </h2>

    <div class="para">
        content6,content6
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="7"></a>
        <span class="headline-1-index">7</span>
        <span class="headline-content">part7</span>
    </h2>

    <div class="para">
        content7,content7
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="8"></a>
        <span class="headline-1-index">8</span>
        <span class="headline-content">part8</span>
    </h2>

    <div class="para">
        content8,content8
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="9"></a>
        <span class="headline-1-index">9</span>
        <span class="headline-content">part9</span>
    </h2>

    <div class="para">
        content9,content9
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="10"></a>
        <span class="headline-1-index">10</span>
        <span class="headline-content">part10</span>
    </h2>

    <div class="para">
        content10,content10
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="11"></a>
        <span class="headline-1-index">11</span>
        <span class="headline-content">part11</span>
    </h2>

    <div class="para">
        content11,content11
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="12"></a>
        <span class="headline-1-index">12</span>
        <span class="headline-content">part12</span>
    </h2>

    <div class="para">
        content12,content12
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="13"></a>
        <span class="headline-1-index">13</span>
        <span class="headline-content">part13</span>
    </h2>

    <div class="para">
        content13,content13
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="14"></a>
        <span class="headline-1-index">14</span>
        <span class="headline-content">part14</span>
    </h2>

    <div class="para">
        content14,content14
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <h2 class="headline-1">
        <a class="anchor-1" name="15"></a>
        <span class="headline-1-index">15</span>
        <span class="headline-content">part15</span>
    </h2>

    <div class="para">
        content15,content15
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        bottom
    </div>
</div>
<div class="slide" style="">
    <div id="sideToolbar" style="position: fixed; bottom: 0">
        <div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;">
            <div id="sideCatalog-sidebar">
                <div class="sideCatalog-sidebar-top"></div>
                <div class="sideCatalog-sidebar-bottom"></div>
            </div>
            <div id="sideCatalog-updown" style="visibility: visible;">
                <div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>
                <div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻页"></div>
            </div>
            <div id="sideCatalog-catalog">
                <dl style="width:175px;zoom:1">
                    <!--
                    <dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight">
                        <span class="sideCatalog-index1">1</span>
                        <a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a>
                        <span class="sideCatalog-dot"></span>
                    </dd>
                    <dd id="sideToolbar-item-0-2" class="sideCatalog-item1">
                        <span class="sideCatalog-index1">2</span>
                        <a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a>
                        <span class="sideCatalog-dot"></span>
                    </dd>
                    <dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2">
                        <span class="sideCatalog-index1">2-1</span>
                        <a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a>
                        <span class="sideCatalog-dot"></span>
                    </dd>
                    -->
                </dl>
            </div>
        </div>
        <a id="sideCatalogBtn" class="" style="visibility: visible;" href="javascript:void(0);"></a>
        <a id="sideToolbar-up" style="visibility: visible;" title="返回顶部" href="javascript:void(0)"></a>
    </div>
</div>
</div>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script>
    var allEle = $(':header[class*="headline"]');
    var headLen = allEle.length;
    var ddArr = [];
    //根据页面内容生成slide导航;
    allEle.each(function(i){
        var sideIndex,
            sideName,
            ddId,
            highlight='',
            ddClass,
            sideAnchor;
        sideName = $(this).find('.headline-content').text();
        if($(this).hasClass('headline-1')){
            sideAnchor = sideIndex = $(this).find('.anchor-1').eq(0).attr('name');
            ddClass = 'sideCatalog-item1';
        }else{
            sideAnchor = $(this).find('.anchor-2').eq(0).attr('name');
            sideIndex = sideAnchor.replace('-','.');
            ddClass = 'sideCatalog-item2';
        }
        ddId = 'sideToolbar-item-0-'+ sideAnchor;
        if(i==0){
            highlight = 'highlight';
        }
        var ddHtml = '<dd id="'+ ddId +'" class="'+ddClass + ' ' + highlight +'">'
                +       '<span class="sideCatalog-index1">'+ sideIndex +'</span>'
                +       '<a class="nslog:1026" onclick="return false;" title="part'+sideAnchor+'" href="#'+sideAnchor+'">'+ sideName +'</a>'
                +       '<span class="sideCatalog-dot"></span>'
                +    '</dd>';
        ddArr.push(ddHtml);
    });
    $('#sideCatalog-catalog dl').html(ddArr.join(''));

    //设置导航的位置
    var slideTop = $(window).height() - $('.slide').height();
    $('.slide').css('top',slideTop);

    var slideInnerHeight = $('#sideCatalog-catalog dl').height();
    var slideOutHeight = $('#sideCatalog-catalog').height();
    var enableTop = slideInnerHeight - slideOutHeight;
    var step = 50;
    //点击向上的按钮
    $('#sideCatalog-down').bind('click', function () {
        if ($(this).hasClass('sideCatalog-down-enable')) {
            if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {
                $('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');
                $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
            } else {
                $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
                $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
            }
        } else {
            return false;
        }
    })
    //点击向下的按钮
    $('#sideCatalog-up').bind('click', function () {
        if ($(this).hasClass('sideCatalog-up-enable')) {
            if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {
                $('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');
                $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            } else {
                $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
                $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
            }
        } else {
            return false;
        }
    })

    //点击导航中的各个目录
    $('#sideCatalog-catalog dl').delegate('dd', 'click', function () {
        var index = $('#sideCatalog-catalog dl dd').index($(this));
        scrollSlide($(this), index);
        var ddIndex = $(this).find('a').stop().attr('href').lastIndexOf('#');
        var ddId = $(this).find('a').stop().attr('href').substring(ddIndex+1);
        var windowTop = $('a[name="' + ddId + '"]').offset().top;
        $('body,html').animate({scrollTop: windowTop}, 'fast');
    })

    //滚动页面,即滚动条滚动
    $(window).scroll(function () {
        if($(this).scrollTop()>$(this).height()){
            $('.slide').show();
        }else{
            $('.slide').hide();
        }
        for (var i=headLen-1; i>=0; i--) {
            if ($(this).scrollTop() >=allEle.eq(i).offset().top - allEle.eq(i).height()) {
                var index = i;
                $('#sideCatalog-catalog dl dd').eq(index).addClass('highlight').siblings('dd').removeClass('highlight');
                scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);
                return false;
            } else {
                $('#sideCatalog-catalog dl dd').eq(0).addClass('highlight').siblings('dd').removeClass('highlight');
            }
        }
    })

    //导航的滚动,以及向上,向下按钮的显示隐藏
    function scrollSlide(that, index){
        if (index < 5) {
            $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
        } else if (index > 11) {
            $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
        } else {
            var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $('#sideCatalog-catalog').offset().top);
            $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');
            $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');
        }
    }

    //置顶
    $('#sideToolbar-up').bind('click', function(){
        $('body,html').animate({scrollTop: 0}, 'fast');
    })

    //slide内容的显示与隐藏
    $('#sideCatalogBtn').bind('click', function(){
        if($(this).hasClass('sideCatalogBtnDisable')){
            $(this).removeClass('sideCatalogBtnDisable');
            $('#sideCatalog').css('visibility','visible');
        }else{
            $(this).addClass('sideCatalogBtnDisable');
            $('#sideCatalog').css('visibility','hidden');
        }
    })

</script>
</body>
</html>

示例代码下载地址:http://muzhuanggzs.ctfile.com/fs/GCQ156539251

相关阅读 >>

在div中img,span怎样可以做出垂直居中

https页面使用百度分享实例详解

css怎么设置span的宽度

html span标签是什么意思?span标签的作用详解

html5中关于div与span html块级元素的详细介绍

html中div与span对比

div与span有什么区别

如何用html制作百度首页

html中span是什么意思

html中span怎么使用

更多相关阅读请进入《百度》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...