1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
| <style type="text/css"> .nav ul li { float: left; margin: 0px 10px 0px 10px; padding: 0px 10px 8px 10px; } .nav ul li.selected { background: #FFFFFF; } .nav ul li.selected a { color: #C85260; font-size: 14px; }
#scroll-page { clear: both; } #scroll-page .mask { width: 200px; overflow: hidden; } #scroll-page .mask .pages > div { float: left; } </style>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script> <script language="javascript" type="text/javascript"> (function($) {
$.fn.extend({ scroll_page: function(options) { var settings = jQuery.extend({ nav_class: ".nav", scroll_page_speed: 800, }, options);
switch_to_tab = (function(hash) { var hash = hash.match(/^#!(.*)$/);
if (hash != null) { hash = hash[1]; } $("ul li", settings.nav_class).each(function() { $(this).removeClass("selected"); }); if (hash == "") { $("ul li:eq(0)", settings.nav_class).addClass("selected"); }else{ $("ul li." + hash).addClass("selected"); } })(window.location.hash);
$('.mask', this).css({ 'height': $('.mask .pages > div:eq(0)', this).height() }); $('.mask .pages', this).width(parseInt($('.mask', this).width() * $('.mask .pages div', this).length)); $('.mask .pages > div', this).width($('.mask', this).width()); var parent = this; $("ul li a", settings.nav_class).click(function() { var target_page = $(this).attr('href').match(/^#!(.*)$/)[1] + "-page"; var panel_height = $("." + target_page).height(); $('.mask', parent).animate({ 'height': panel_height },{ queue: false, duration: 500 }); $('.mask', parent).scrollTo("." + $(this).attr('href').match(/^#!(.*)$/)[1] + "-page", settings.scroll_page_speed); }); $("ul li a[href='" + window.location.hash + "']", settings.nav_class).click(); } });
$(document).ready(function() { $("#scroll-page").scroll_page() });
})(jQuery); </script>
<body> <div class="nav"> <ul> <li class="home"><a href="#!home">Home</a></li> <li class="contact"><a href="#!contact">Contact</a></li> <li class="sitemap"><a href="#!sitemap">Site Map</a></li> </ul> </div> <div id="scroll-page"> <div class="mask"> <div class="pages"> <div class="home-page">This is a home page</div> <div class="contact-page">This is a contact page</div> <div class="sitemap-page">This is a site map page</div> </div> </div> </div> </body>
|