JS實(shí)現(xiàn)標(biāo)簽滾動(dòng)切換效果

第JS實(shí)現(xiàn)標(biāo)簽滾動(dòng)切換效果本文的JS效果是在鼠標(biāo)點(diǎn)擊ITEM標(biāo)簽的時(shí)候，實(shí)現(xiàn)下方的內(nèi)容跟隨滾動(dòng)切換的效果，我們先來看下運(yùn)行后的效果圖。

以下是原創(chuàng)的運(yùn)行代碼：

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="/1999/xhtml"

head

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/

titlejQuery實(shí)現(xiàn)的平滑滾動(dòng)選項(xiàng)卡/title

scripttype="text/javascript"src="/jquery/2.0.0/jquery.min.js"/script

style

.tabs{width:1200px;margin:0auto;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

scriptjQuery.easing['easeOutCubic']=function(x,t,b,c,d){

returnc*((t=t/d-1)*t*t+1)+b;

functionTabs(tabs,list,block,item,$){

vartabs=$(tabs);

varwidth=tabs.width();

tabs.find(list+':first').addClass('active');

tabs.find(item+':first').addClass('show');

tabs.find(list).click(function(){

var$this=$(this);

vari=tabs.find(block).find('.show').index();

varn=$this.index();

$this.addClass('active').siblings('.active').removeClass('active');

tabs.find(item).eq(n).addClass('show');

if(ni){

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

div

divlistitem1/div

divlistitem2/div

divlistitem3/div

divlistitem4/div

divlistitem5/div

divlistitem6/div

/div

div/div

div

divlistblock1/div

divlistblock2/div

divlistblock3/div

divlistblock4/div

divlistblock5/div

divlistblock6/div

/div

/div

scripttype="text/javascript"

jQuery(document).ready(function(){

varmyTabs=newTabs('.tabs','.list_item','.tabs_block','.list_block',jQuery);

/script

p更多代碼請(qǐng)?jiān)L問：ahref=""target="_blank"/a/p

/body