javascript代码实例教程-jQuery+css实现百度百科的页面导航效果_js

上一篇: javascript代码实例教程-分享33个... 下一篇:javascript代码实例教程-JavaScr...

javascript代码实例教程-jQuery+css实现百度百科的页面导航效果

发布时间：2018-12-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery+css实现百度百科的页面导航效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。

下图为导航部分的效果图：

jQuery+css实现百度百科的页面导航效果

css和图片都是抄百度的，可从百度百科下载。

具体的代码如下：

代码如下:

<!DOCTYPE htML>
<html>
<head>
 <tITle></title>
 <;meta charset="utf-8">
 <link rel="stylesheet" href="baidu.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>


 <h2 class="headline-1">
 <a class="anchor-1" name="1"></a>
 1
 part1
 </h2>

content1,content1
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="2"></a>
 2
 part2
 </h2>

content2,content2
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="2-1"></a>
 2-1
 part2-1
 </h2>

content2-1,content2-1
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="2-2"></a>
 2-2
 part2-2
 </h2>

content2-2,content2-2
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="3"></a>
 3
 part3
 </h2>

content,content
 nbsp; 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="4"></a>
 4
 part4
 </h2>

content,content
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="5"></a>
 5
 part5
 </h2>

content5,content5
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="6"></a>
 6
 part6
 </h2>

content6,content6
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="7"></a>
 7
 part7
 </h2>

content7,content7
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="8"></a>
 8
 part8
 </h2>

content8,content8
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="9"></a>
 9
 part9
 </h2>

content9,content9
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="10"></a>
 10
 part10
 </h2>

content10,content10
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="11"></a>
 11
 part11
 </h2>

content11,content11
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="12"></a>
 12
 part12
 </h2>

content12,content12
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="13"></a>
 13
 part13
 </h2>

content13,content13
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="14"></a>
 14
 part14
 </h2>

content14,content14
 
 
 <h2 class="headline-1">
 <a class="anchor-1" name="15"></a>
 15
 part15
 </h2>

content15,content15
 
 
 bottom
 


 
 
 
 
 
 
 
 
 
 
 
 <dl style="width:175px;zoom:1">
 <dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight">
 1
 <a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a>
 
 </dd>
 <dd id="sideToolbar-item-0-2" class="sideCatalog-item1">
 2
 <a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a>
 
 </dd>
 <dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2">
 2-1
 <a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a>
 
 </dd>
 <dd id="sideToolbar-item-0-2-2" class="sideCatalog-item2">
 2-2
 <a class="nslog:1026" onclick="return false;" title="part2" href="#2-2">part2-2</a>
 
 </dd>
 <dd id="sideToolbar-item-0-3" class="sideCatalog-item1">
 3
 <a class="nslog:1026" onclick="return false;" title="part3" href="#3">part3</a>
 
 </dd>
 <dd id="sideToolbar-item-0-4" class="sideCatalog-item1">
 4
 <a class="nslog:1026" onclick="return false;" title="part4" href="#4">part4</a>
 
 </dd>
 <dd id="sideToolbar-item-0-5" class="sideCatalog-item1">
 5
 <a class="nslog:1026" onclick="return false;" title="part5" href="#5">part5</a>
 
 </dd>
 <dd id="sideToolbar-item-0-6" class="sideCatalog-item1">
 6
 <a class="nslog:1026" onclick="return false;" title="part6" href="#6">part6</a>
 
 </dd>
 <dd id="sideToolbar-item-0-7" class="sideCatalog-item1">
 7
 <a class="nslog:1026" onclick="return false;" title="part7" href="#7">part7</a>
 
 </dd>
 <dd id="sideToolbar-item-0-8" class="sideCatalog-item1">
 8
 <a class="nslog:1026" onclick="return false;" title="part8" href="#8">part8</a>
 
 </dd>
 <dd id="sideToolbar-item-0-9" class="sideCatalog-item1">
 9
 <a class="nslog:1026" onclick="return false;" title="part9" href="#9">part9</a>
 
 </dd>
 <dd id="sideToolbar-item-0-10" class="sideCatalog-item1">
 10
 <a class="nslog:1026" onclick="return false;" title="part10" href="#10">part10</a>
 
 </dd>
 <dd id="sideToolbar-item-0-11" class="sideCatalog-item1">
 11
 <a class="nslog:1026" onclick="return false;" title="part11" href="#11">part11</a>
 
 </dd>
 <dd id="sideToolbar-item-0-12" class="sideCatalog-item1">
 12
 <a class="nslog:1026" onclick="return false;" title="part12" href="#12">part12</a>
 
 </dd>
 <dd id="sideToolbar-item-0-13" class="sideCatalog-item1">
 13
 <a class="nslog:1026" onclick="return false;" title="part13" href="#13">part13</a>
 
 </dd>
 <dd id="sideToolbar-item-0-14" class="sideCatalog-item1">
 14
 <a class="nslog:1026" onclick="return false;" title="part14" href="#14">part14</a>
 
 </dd>
 <dd id="sideToolbar-item-0-15" class="sideCatalog-item1">
 15
 <a class="nslog:1026" onclick="return false;" title="part15" href="#15">part15</a>
 
 </dd>
 </dl>
 
 
 <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>
 


<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script>
 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 (e) {
        var index = $(this).index();
        scrollSlide($(this), index);
        var ddId = $(this).find('a').stop().attr('href').substring(1);
        var windowTop = $('a[name="' + ddId + '"]').offset().top;
        $('body,html').animate({scrollTop: windowTop}, 'fast');
        $(this).addClass('heightlight').siblings('dd').removeClass('heightlight');
    })

    //滚动页面，即滚动条滚动
    $(document).scroll(function () {
        var len = $('.headline-1').length;
        for (var i=len-1; i>=0; i--) {
            if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height()) {
                var index = i;
                $('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');
                scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);
                return false;
            } else {
                $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');
            }
        }
    })

//导航的滚动，以及向上，向下按钮的显示隐藏
 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 - $(document).scrollTop());
 $('#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');
 }
 }
</script>
</body>
</html>

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery+css实现百度百科的页面导航效果全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery+css实现百度百科的页面导航效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Class CSS CSS HTML jQuery jQuery let post-format-gallery this

上一篇: javascript代码实例教程-分享33个... 下一篇:javascript代码实例教程-JavaScr...

猜你在找的js相关文章

全站导航更多