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

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

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

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

具体的代码如下：

复制代码 代码如下:

   
   
   
   

   

       
        1
        part1
   

   

        content1,content1
       

























   

   

       
        2
        part2
   

   

        content2,content2
       

























   

   

       
        2-1
        part2-1
   

   

        content2-1,content2-1
       

























   

   

       
        2-2
        part2-2
   

   

        content2-2,content2-2
       

























   

   

       
        3
        part3
   

   

        content,content
       

























   

   

       
        4
        part4
   

   

        content,content
       

























   

   

       
        5
        part5
   

   

        content5,content5
       

























   

   

       
        6
        part6
   

   

        content6,content6
       

























   

   

       
        7
        part7
   

   

        content7,content7
       

























   

   

       
        8
        part8
   

   

        content8,content8
       

























   

   

       
        9
        part9
   

   

        content9,content9
       

























   

   

       
        10
        part10
   

   

        content10,content10
       

























   

   

       
        11
        part11
   

   

        content11,content11
       

























   

   

       
        12
        part12
   

   

        content12,content12
       

























   

   

       
        13
        part13
   

   

        content13,content13
       

























   

   

       
        14
        part14
   

   

        content14,content14
       

























   

   

       
        15
        part15
   

   

        content15,content15
       

























       

























        bottom
   

   

       

           

               

               

           

           

               

               

           

           

               

                   

                        1
                        part1
                       
                   

                   

                        2
                        part2
                       
                   

                   

                        2-1
                        part2-1
                       
                   

                   

                        2-2
                        part2-2
                       
                   

                   

                        3
                        part3
                       
                   

                   

                        4
                        part4
                       
                   

                   

                        5
                        part5
                       
                   

                   

                        6
                        part6
                       
                   

                   

                        7
                        part7
                       
                   

                   

                        8
                        part8
                       
                   

                   

                        9
                        part9
                       
                   

                   

                        10
                        part10
                       
                   

                   

                        11
                        part11
                       
                   

                   

                        12
                        part12
                       
                   

                   

                        13
                        part13
                       
                   

                   

                        14
                        part14
                       
                   

                   

                        15
                        part15
                       
                   

               

           

       

       
       
   

<script><br /> var slideInnerHeight = $('#sideCatalog-catalog dl').height();<br /> var slideOutHeight = $('#sideCatalog-catalog').height();<br /> var enableTop = slideInnerHeight - slideOutHeight;<br /> var step = 50;<br /> //点击向上的按钮<br /> $('#sideCatalog-down').bind('click', function () {<br /> if ($(this).hasClass('sideCatalog-down-enable')) {<br /> if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> } else {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br /> $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br /> }<br /> } else {<br /> return false;<br /> }<br /> })<br /> //点击向下的按钮<br /> $('#sideCatalog-up').bind('click', function () {<br /> if ($(this).hasClass('sideCatalog-up-enable')) {<br /> if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> } else {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br /> $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br /> }<br /> } else {<br /> return false;<br /> }<br /> }) <p> //点击导航中的各个目录<br /> $('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {<br /> var index = $(this).index();<br /> scrollSlide($(this), index);<br /> var ddId = $(this).find('a').stop().attr('href').substring(1);<br /> var windowTop = $('a[name="' + ddId + '"]').offset().top;<br /> $('body,html').animate({scrollTop: windowTop}, 'fast');<br /> $(this).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> }) <p> //滚动页面，即滚动条滚动<br /> $(document).scroll(function () {<br /> var len = $('.headline-1').length;<br /> for (var i=len-1; i>=0; i--) {<br /> if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height()) {<br /> var index = i;<br /> $('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);<br /> return false;<br /> } else {<br /> $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br /> }<br /> }<br /> }) <p> //导航的滚动，以及向上，向下按钮的显示隐藏<br /> function scrollSlide(that, index){<br /> if (index < 5) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br /> } else if (index > 11) {<br /> $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> } else {<br /> var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());<br /> $('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');<br /> $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br /> $('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br /> }<br /> }<br /> </script>

大站就是有大站的风范，很多效果还都是他们先开始制作使用，小伙伴们可以经常去逛逛，很容易发现些好东西