本文的JS效果是在鼠標點擊ITEM標簽的時候，實現下方的內容跟隨滾動切換的效果，我們先來看下運行后的效果圖。
以下是武林網原創的運行代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jQuery實現的平滑滾動選項卡</title><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>.tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;}.tabs_item{height: 36px;}.tabs_block{height: 300px;}.list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;background-color:#FC0;cursor: pointer;}.list_item.active{color: #FFF;background-color:#F60}.tabs_block{width: 20000px; position: relative;}.list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;background-color:#F4F4F4}.list_block.show{display: block;}</style><script>jQuery.easing['easeOutCubic'] = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b;};function Tabs(tabs,list,block,item,$){ var tabs = $(tabs); var width = tabs.width(); tabs.find(list+':first').addClass('active'); tabs.find(item+':first').addClass('show'); tabs.find(list).click(function(){ var $this = $(this); var i = tabs.find(block).find('.show').index(); var n = $this.index(); $this.addClass('active').siblings('.active').removeClass('active'); tabs.find(item).eq(n).addClass('show'); if(n > i){ tabs.find(block).stop().animate({'left':'-'+width+'px'},600,'easeOutCubic',function(){ tabs.find(block).css('left','0px'); tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); }else{ tabs.find(block).css('left','-'+width+'px').stop().animate({'left':0},600,'easeOutCubic',function(){ tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); } });}</script></head><body> <div class="tabs"> <div class="tabs_item"> <div class="list_item">list item 1</div> <div class="list_item">list item 2</div> <div class="list_item">list item 3</div> <div class="list_item">list item 4</div> <div class="list_item">list item 5</div> <div class="list_item">list item 6</div> </div> <div class="clear"> </div> <div class="tabs_block"> <div class="list_block">list block 1</div> <div class="list_block">list block 2</div> <div class="list_block">list block 3</div> <div class="list_block">list block 4</div> <div class="list_block">list block 5</div> <div class="list_block">list block 6</div> </div> </div><script type="text/javascript"> jQuery(document).ready(function(){ var myTabs = new Tabs('.tabs','.list_item','.tabs_block','.list_block',jQuery); });</script><p style="text-align:center">更多代碼請訪問：<a href="http://m.survivalescaperooms.com" target="_blank">武林網</a></p></body></html>在代碼中我們引用了百度的jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
需要的朋友跟著學習下吧，感謝你對武林網的支持。
新聞熱點
疑難解答
