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

　　这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。

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

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

　　具体的代码如下：

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<style>

　　* {

　　margin: 0;

　　padding: 0

　　}

　　.wrap {

　　width: 1000px;

　　overflow: hidden;

　　margin: 0 auto;

　　}

　　.content {

　　width: 780px;

　　float: left;

　　}

　　.slide {

　　width: 200px;

　　float: right;

　　}

</style>

</head>

<body>

1

part1

</h2>

　　content1,content1

</div>

2

part2

</h2>

　　content2,content2

</div>

2-1

part2-1

</h2>

　　content2-1,content2-1

</div>

2-2

part2-2

</h2>

　　content2-2,content2-2

</div>

3

part3

</h2>

　　content,content

</div>

4

part4

</h2>

　　content,content

</div>

5

part5

</h2>

　　content5,content5

</div>

6

part6

</h2>

　　content6,content6

</div>

7

part7

</h2>

　　content7,content7

</div>

8

part8

</h2>

　　content8,content8

</div>

9

part9

</h2>

　　content9,content9

</div>

10

part10

</h2>

　　content10,content10

</div>

11

part11

</h2>

　　content11,content11

</div>

12

part12

</h2>

　　content12,content12

</div>

13

part13

</h2>

　　content13,content13

</div>

14

part14

</h2>

　　content14,content14

</div>

15

part15

</h2>

　　content15,content15

　　bottom

</div>

</div>

</div>

1

</dd>

2

</dd>

2-1

</dd>

2-2

</dd>

3

</dd>

4

</dd>

5

</dd>

6

</dd>

7

</dd>

8

</dd>

9

</dd>

10

</dd>

11

</dd>

12

</dd>

13

</dd>

14

</dd>

15

</dd>

</dl>

</div>

</div>

　　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');

　　}

</script>

</body>

</html>

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

教程首页更多教程