jQuery css は、Baidu Encyclopedia_jquery のページナビゲーション効果を実装します。-jsチュートリアル-php.cn

jQuery css は、Baidu Encyclopedia_jquery のページナビゲーション効果を実装します。

WBOY

リリース： 2016-05-16 16:26:19

オリジナル

1333 人が閲覧しました

今週、百度百科のページナビゲーション効果を偶然目にして、とても良いと思ったので、週末に時間をかけて書いてみました。

下の図はナビゲーション部分のレンダリングです:

CSS と画像は Baidu からコピーされたもので、Baidu Encyclopedia からダウンロードできます。

具体的なコードは次のとおりです:

コードをコピーコードは次のとおりです:

        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 () {
        if ($(this).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');
            } else {
                $('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');
                $(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');
            }
        } else {
            false を返します;
        }
    })
    //点击向下の按钮
    $('#sideCatalog-up').bind('click', function () {
        if ($(this).hasClass('sideCatalog-up-enable')) {
            if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {
                $('#sideCatalog-catalog dl').stop().animate({'top': ' =' step}, 'fast');
                $('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');
            } else {
                $('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');
                $(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');
            }
        } else {
            false を返します;
        }
    })

//点击导航中の各項目录
    $('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {
        var インデックス = $(this).index();
        scrollSlide($(this), インデックス);
        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');
    })

//ページをスクロールします。つまり、スクロールバーでスクロールします
$(document).scroll(function () {
var len = $('.headline-1').length;
for (var i=len-1; i>=0; i--) {
if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height ()) {
var インデックス = i;
$('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');
scrollSlide($('#sideCatalog-catalog dl dd').eq(index),index);
return false;
} else {
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');
}
}
})

//ナビゲーションのスクロール、上下ボタンの表示・非表示
関数scrollSlide(that,index){
If (インデックス $('#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');
} else if (インデックス > 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');
} else {
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');
}
}