Maison > interface Web > js tutoriel > 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
Libérer: 2016-05-16 16:26:19
original
1363 Les gens l'ont consulté

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal