这是一款老外的作品，后半部分的代码有点乱，具体就不细整理了，喜欢的朋友自己拷贝代码慢慢整理一下吧，呵呵，虽乱但功能不乱，预览看效果吧，很不错的标签滚动切换。
先来看看运行效果截图：
在线演示地址如下：
具体代码如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery超平滑滚动的标签分栏切换效果</title> <style> body { font-size: 10px; font-family: verdana,sans-serif; background-color: gray; background-image: url(); background-position: 50% 50%; padding: 0px; margin: 0px; } .content { width: 800px; margin: 0px auto; background-color: #ffffff; padding: 20px; } h1 { color:#221A69; font-weight:normal; text-decoration:none; } .tabbed_content { background-color: #000000; width: 620px; } .tabs { height: 62px; position: relative; } .tabs .moving_bg { padding: 15px; background-color:#7F822A; background-image:url(images/arrow_down_green.gif); position: absolute; width: 125px; z-index: 190; left: 0; padding-bottom: 29px; background-position: bottom left; background-repeat: no-repeat; } .tabs .tab_item { display: block; float: left; padding: 15px; width: 125px; color: #ffffff; text-align: center; z-index: 200; position: relative; cursor: pointer; } .tabbed_content .slide_content { overflow: hidden; background-color: #000000; padding: 20px 0 20px 20px; position: relative; width: 600px; } .tabslider { width: 5000px; } .tabslider ul { float: left; width: 560px; margin: 0px; padding: 0px; margin-right: 40px; } .tabslider ul a { color: #ffffff; text-decoration: none; } .tabslider ul a:hover { color: #aaaaaa; } .tabslider ul li { padding-bottom: 7px; } </style> <script type='text/javascript' src='https://www.jb51.net/jquery-1.6.2.min.js'></script> <script type="text/javascript"> var TabbedContent = { init: function() { $(".tab_item").mouseover(function() { var background = $(this).parent().find(".moving_bg"); $(background).stop().animate({ left: $(this).position()['left'] }, { duration: 300 }); TabbedContent.slideContent($(this)); }); }, slideContent: function(obj) { var margin = $(obj).parent().parent().find(".slide_content").width(); margin = margin * ($(obj).prevAll().size() - 1); margin = margin * -1; $(obj).parent().parent().find(".tabslider").stop().animate({ marginLeft: margin + "px" }, { duration: 300 }); } } $(document).ready(function() { TabbedContent.init(); }); </script> </head> <body> <div> <div> <h1>Tabbed content with jQuery</h1> <p> An example of some tabbed content containers. </p> <h2>Example:</h2> <div> <div> <div> </div> <span> Latest posts </span> <span> Top posts </span> <span> Partners </span> <span> Links </span> </div> <div> <div> <ul> <li> <a href='#'> New looks coming your way </a> </li> <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li> <li> <a href='#'> Image slider for displaying pictures or portfolios </a> </li> <li> <a href='#'> AjaxTwits - Load Tweets on your website with AJAX </a> </li> </ul> <ul> <li> <a href='#'> Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> New looks coming your way </a> </li> <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li> <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> Lightbox + PhotoNav = LightNav </a> </li> </ul> <ul> <li> <a href='#'> Sieb Design | Design + Illustration </a> </li> <li> <a href='#'> Cybox | Internet & Communicatie </a> </li> <li> <a href='#'> Hypekid | Pim Arts, a freelance web-developer from the Netherlands </a> </li> <li> <a href='#'> Marcofolio | Marco's weblog </a> </li> <li> <a href='#'> Dev Tips | Become a better developer, one tip at a time </a> </li> </ul> <ul> <li> <a href='#'> Last.fm profile </a> </li> <li> <a href='#'> Gaya Design on Twitter </a> </li> <li> <a href='#'> My Youtube Channel </a> </li> <li> <a href='#'> Linked in profile </a> </li> <li> <a href='#'> Stuff to do with a NDS blog </a> </li> </ul> </div> <br /> </div> </div> <br /> <br /> <div> <div> <div> </div> <span> Latest posts </span> <span> Top posts </span> <span> Partners </span> <span> Links </span> </div> <div> <div> <ul> <li> <a href='#'> New looks coming your way </a> </li> <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li> <li> <a href='#'> Image slider for displaying pictures or portfolios </a> </li> <li> <a href='#'> AjaxTwits - Load Tweets on your website with AJAX </a> </li> </ul> <ul> <li> <a href='#'> Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> New looks coming your way </a> </li> <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li> <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li> <li> <a href='#'> Lightbox + PhotoNav = LightNav </a> </li> </ul> <ul> <li> <a href='#'> Sieb Design | Design + Illustration </a> </li> <li> <a href='#'> Cybox | Internet & Communicatie </a> </li> <li> <a href='#'> Hypekid | Pim Arts, a freelance web-developer from the Netherlands </a> </li> <li> <a href='#'> Marcofolio | Marco's weblog </a> </li> <li> <a href='#'> Dev Tips | Become a better developer, one tip at a time </a> </li> </ul> <ul> <li> <a href='#'> Last.fm profile </a> </li> <li> <a href='#'> Gaya Design on Twitter </a> </li> <li> <a href='#'> My Youtube Channel </a> </li> <li> <a href='#'> Linked in profile </a> </li> <li> <a href='#'> Stuff to do with a NDS blog </a> </li> </ul> </div> <br /> </div> </div> </div> </div> </body> </html>