这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery+CSS 实现百度百科的页面导航效果, 需要的朋友可以参考下
这周不小心看到了百度百科的页面导航效果,感觉挺不错的,周末抽空写了下。
下图为导航部分的效果图:
css 和图片都是抄百度的,可从百度百科下载。
具体的代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- </title>
- <meta charset="utf-8">
- <link rel="stylesheet" href="baidu.css">
- <style>
- * { margin: 0; padding: 0 }
.wrap { width: 1000px; overflow: hidden; margin: 0 auto; }
.content { width: 780px; float: left; }
.slide { width: 200px; float: right; }
1 part1content1,content1
2 part2content2,content2
2-1 part2-1content2-1,content2-1
2-2 part2-2content2-2,content2-2
3 part3content,content
4 part4content,content
5 part5content5,content5
6 part6content6,content6
7 part7content7,content7
8 part8content8,content8
9 part9content9,content9
10 part10content10,content10
11 part11content11,content11
12 part12content12,content12
13 part13content13,content13
14 part14content14,content14
15 part15content15,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'); } }
来源: http://www.phperz.com/article/17/0427/273882.html