jQuery实现平滑滚动的标签分栏切换效果

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下：

这是一款老外的作品，后半部分的代码有点乱，具体就不细整理了，喜欢的朋友自己拷贝代码慢慢整理一下吧，呵呵，虽乱但功能不乱，预览看效果吧，很不错的标签滚动切换。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/

具体代码如下：

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;
}






 
 Tabbed content with jQuery
 

 An example of some tabbed content containers.
 
 
 Example:
 
 
 
  
 
 
  Latest posts
 
 
  Top posts
  
  
  Partners
  
  
  links
  
  
    
  
  

  

  
   New looks coming your way
   
  
  

   
   jQuery convertion: Panoramic Photoviewer in Javascript
   
  
  

   
   jQuery convertion: Garagedoor effect using Javascript
   
  
  

   
   Image slider for displaying pictures or portfolios
   
  
  

   
   AjaxTwits - Load Tweets on your website with AJAX
   
  
  
  

  

   
   Panoramic Photoviewer in Javascript
   
  
  

   
   New looks coming your way
   
  
  

   
   jQuery convertion: Garagedoor effect using Javascript
   
  
  

   
   jQuery convertion: Panoramic Photoviewer in Javascript
   
  
  

   
   Lightbox + Photonav = LightNav
   
  
  
  

  

   
   Sieb Design | Design + Illustration
   
  
  

   
   Cybox | Internet & Communicatie
   
  
  

   
   Hypekid | Pim Arts, a freelance web-developer from the Netherlands
   
  
  

   
   Marcofolio | Marco's weblog
   
  
  

   
   Dev Tips | Become a better developer, one tip at a time
   
  
  
  

  

   
   Last.fm profile
   
  
  

   
   Gaya Design on Twitter
   
  
  

   
   My Youtube Channel
   
  
  

   
   linked in profile
   
  
  

   
   Stuff to do with a NDS blog
   
  
  
  
  

  
 
 

 

 
  
  
   
  
  
  Latest posts
  
  
  Top posts
  
  
  Partners
  
  
  links
  
  
    
  
  

  

   
   New looks coming your way
   
  
  

   
   jQuery convertion: Panoramic Photoviewer in Javascript
   
  
  

   
   jQuery convertion: Garagedoor effect using Javascript
   
  
  

   
   Image slider for displaying pictures or portfolios
   
  
  

   
   AjaxTwits - Load Tweets on your website with AJAX
   
  
  
  

  

   
   Panoramic Photoviewer in Javascript
   
  
  

   
   New looks coming your way
   
  
  

   
   jQuery convertion: Garagedoor effect using Javascript
   
  
  

   
   jQuery convertion: Panoramic Photoviewer in Javascript
   
  
  

   
   Lightbox + Photonav = LightNav
   
  
  
  

  

   
   Sieb Design | Design + Illustration
   
  
  

   
   Cybox | Internet & Communicatie
   
  
  

   
   Hypekid | Pim Arts, a freelance web-developer from the Netherlands
   
  
  

   
   Marcofolio | Marco's weblog
   
  
  

   
   Dev Tips | Become a better developer, one tip at a time
   
  
  
  

  

   
   Last.fm profile
   
  
  

   
   Gaya Design on Twitter
   
  
  

   
   My Youtube Channel
   
  
  

   
   linked in profile
   
  
  

   
   Stuff to do with a NDS blog
   
  
  
  
  

  
 
 
 

希望本文所述对大家的jquery程序设计有所帮助。