jQuery css melaksanakan kesan navigasi halaman Baidu Encyclopedia_jquery

Saya secara tidak sengaja melihat kesan navigasi halaman Ensiklopedia Baidu minggu ini, saya fikir ia agak bagus, jadi saya meluangkan masa untuk menulis mengenainya pada hujung minggu.

Gambar di bawah ialah pemaparan bahagian navigasi:

Css dan imej disalin daripada Baidu dan boleh dimuat turun daripada Ensiklopedia Baidu.

Kod khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

   
   
   
   

   

       
        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
                       
                   

               

           

       

       
       
   

    var slideInnerHeight = $('#sideCatalog-catalog dl').height();
    var slideOutHeight = $('#sideCatalog-catalog').height();
    var enableTop = slideInnerHeight - slideOutHeight;
    var step = 50;
    //点击向上的按钮
    $('#sideCatalog-down').bind('click', function () {
        jika ($(ini).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');
            } lain {
                $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
                $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
            }
        } lain {
            pulangkan palsu;
        }
    })
    //点击向下的按钮
    $('#sideCatalog-up').bind('click', function () {
        jika ($(ini).hasClass('sideCatalog-up-enable')) {
            if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('atas'))) > step) {
                $('#sideCatalog-catalog dl').stop().animate({'top': ' =' step}, 'fast');
                $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            } lain {
                $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
                $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
            }
        } lain {
            pulangkan palsu;
        }
    })

    //点击导航中的各个目录
    $('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {
        var indeks = $(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');
    })

//Tatal halaman, iaitu tatal dengan bar tatal
$(dokumen).skrol(fungsi () {
        var len = $('.headline-1').length;
untuk (var i=len-1; i>=0; i--) {
jika ($(ini).scrollTop() >= $('.headline-1').eq(i).offset().atas - $('.headline-1').eq(i).height ()) {
              indeks var = i;
                 $('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').adik-beradik('dd').removeClass('heightlight');
                 scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);
                       pulangan palsu;
              } lain {
                 $('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');
            }
}
})

//Tatal navigasi, dan paparan serta penyembunyian butang atas dan bawah
Fungsi tatalSlide(itu, indeks){
Jika (indeks < 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');
           } jika tidak (indeks > 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');
         } lain {
                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');
}
}

Tapak web besar mempunyai gaya laman web besar yang dihasilkan dan digunakan oleh mereka terlebih dahulu. Rakan-rakan boleh pergi membeli-belah dan mencari beberapa perkara yang baik dengan mudah