Rumah > hujung hadapan web > tutorial js > jQuery css melaksanakan kesan navigasi halaman Baidu Encyclopedia_jquery

jQuery css melaksanakan kesan navigasi halaman Baidu Encyclopedia_jquery

WBOY
Lepaskan: 2016-05-16 16:26:19
asal
1356 orang telah melayarinya

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan