jQuery+css实现百度百科的页面导航效果_jquery

下图为导航部分的效果图：

css和图片都是抄百度的，可从百度百科下载。

具体的代码如下：

代码如下:

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 {
return 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 {
return false;
}
})

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

//滚动页面，即滚动条滚动
$(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 index = 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');
}
}
})

//导航的滚动，以及向上，向下按钮的显示隐藏
function scrollSlide(that, index){
if (index < 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');
} else if (index > 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');
}
}

大站就是有大站的风范，很多效果还都是他们先开始制作使用，小伙伴们可以经常去逛逛，很容易发现些好东西