jQuery+css实现百度百科的页面导航效果_Javascript教程-查字典教程网

摘要：这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。下图为导航部分的效果图：css和图片都是抄百度的，可从百度百科下载。具...

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

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

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

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>

<div>

<h2>

1

part1

</h2>

<div>

content1,content1

</div>

<h2>

2

part2

</h2>

<div>

content2,content2

</div>

<h2>

2-1

part2-1

</h2>

<div>

content2-1,content2-1

</div>

<h2>

2-2

part2-2

</h2>

<div>

content2-2,content2-2

</div>

<h2>

3

part3

</h2>

<div>

content,content

</div>

<h2>

4

part4

</h2>

<div>

content,content

</div>

<h2>

5

part5

</h2>

<div>

content5,content5

</div>

<h2>

6

part6

</h2>

<div>

content6,content6

</div>

<h2>

7

part7

</h2>

<div>

content7,content7

</div>

<h2>

8

part8

</h2>

<div>

content8,content8

</div>

<h2>

9

part9

</h2>

<div>

content9,content9

</div>

<h2>

10

part10

</h2>

<div>

content10,content10

</div>

<h2>

11

part11

</h2>

<div>

content11,content11

</div>

<h2>

12

part12

</h2>

<div>

content12,content12

</div>

<h2>

13

part13

</h2>

<div>

content13,content13

</div>

<h2>

14

part14

</h2>

<div>

content14,content14

</div>

<h2>

15

part15

</h2>

<div>

content15,content15

bottom

</div>

<div>

</div>

</div>

<dl>

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>

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