Maison  >  Article  >  interface Web  >  jQuery css implémente l'effet de navigation de page de Baidu Encyclopedia_jquery

jQuery css implémente l'effet de navigation de page de Baidu Encyclopedia_jquery

WBOY
WBOYoriginal
2016-05-16 16:26:191322parcourir

J'ai accidentellement vu l'effet de navigation dans les pages de l'Encyclopédie Baidu cette semaine. Je l'ai trouvé plutôt bon, alors j'ai pris le temps d'écrire à ce sujet ce week-end.

L'image ci-dessous est le rendu de la partie navigation :

Les CSS et les images sont copiés depuis Baidu et peuvent être téléchargés depuis l'Encyclopédie Baidu.

Le code spécifique est le suivant :

Copier le code Le code est le suivant :




   
   
   
   




   


       
        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 activateTop = slideInnerHeight - slideOutHeight;<br>     var pas = 50 ;<br>     //点击向上的按钮<br>     $('#sideCatalog-down').bind('clic', 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>             } autre {<br>                 $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br>                 $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br>             ><br>         } autre {<br>             retourner faux ;<br>         ><br>     })<br>     //点击向下的按钮<br>     $('#sideCatalog-up').bind('clic', 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>             } autre {<br>                 $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br>                 $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br>             ><br>         } autre {<br>             retourner faux ;<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> //Faites défiler la page, c'est-à-dire faites défiler avec la barre de défilement<br> $(document).scroll(function () {<br>         var len = $('.headline-1').length;<br> pour (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>                } autre {<br>                  $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br>             }<br> ><br> })</p> <p> //Défilement de la navigation, et affichage et masquage des boutons haut et bas<br> Fonction scrollSlide(cela, index){<br> Si (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 />            } sinon si (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>          } autre {<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>


Le grand site Web a le style d'un grand site Web. De nombreux effets sont produits et utilisés en premier. Les amis peuvent souvent faire du shopping et trouver facilement de bonnes choses

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn