本文實例講述了jQuery實現平滑滾動的標簽分欄切換效果。分享給大家供大家參考。具體如下：
這是一款老外的作品，后半部分的代碼有點亂，具體就不細整理了，喜歡的朋友自己拷貝代碼慢慢整理一下吧，呵呵，雖亂但功能不亂，預覽看效果吧，很不錯的標簽滾動切換。
先來看看運行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-scroll-bq-menu-cha-style-codes/
具體代碼如下：
<!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='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 style='padding: 15px;'> <div class='content'> <h1>Tabbed content with jQuery</h1> <p> An example of some tabbed content containers. </p> <h2>Example:</h2> <div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'> </div> <span class='tab_item'> Latest posts </span> <span class='tab_item'> Top posts </span> <span class='tab_item'> Partners </span> <span class='tab_item'> Links </span> </div> <div class='slide_content'> <div class='tabslider'> <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 style='clear: both' /> </div> </div> <br /> <br /> <div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'> </div> <span class='tab_item'> Latest posts </span> <span class='tab_item'> Top posts </span> <span class='tab_item'> Partners </span> <span class='tab_item'> Links </span> </div> <div class='slide_content'> <div class='tabslider'> <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 style='clear: both' /> </div> </div> </div> </div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
