Home >Web Front-end >JS Tutorial >jQuery css implements the page navigation effect of Baidu Encyclopedia_jquery

jQuery css implements the page navigation effect of Baidu Encyclopedia_jquery

WBOY
WBOYOriginal
2016-05-16 16:26:191337browse

I accidentally saw the page navigation effect of Baidu Encyclopedia this week. I thought it was quite good, so I took the time to write about it over the weekend.

The picture below is the rendering of the navigation part:

The css and images are copied from Baidu and can be downloaded from Baidu Encyclopedia.

The specific code is as follows:

Copy code The code is as follows:




   
   
   
   




   


       
        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> <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> <p> //Scroll the page, that is, scroll with the scroll bar<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> <p> //Scrolling of navigation, and display and hiding of up and down buttons<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>


The big website has the style of a big website. Many of the effects are produced and used first. Friends can go shopping often and find some good things easily

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn