此tabs能自动运行，鼠标经过自动停止，加入了淡入淡出效果和选项卡形变的效果
演示地址：http://www.wzmsj.com/autotabs/090104tabs/
下载地址见帖子底部
核心代码:
JScript codevar Tabs = new Class({
Implements: [Options,Events],
options:{
selectedTabCss: ' selected ' ,
selectedSectionCss: ' selected ' ,
mvSH: 0 ,
firstShow: 0 ,
autoInterval: 5 ,
mouseEvent: ' mouseover '
},
initialize: function (tabs, sections, options){
this .setOptions(options);
this .current = this .options.firstShow;
this .tabs = $$(tabs);
this .sections = $$(sections);
this .sectionsLength = $$(sections).length;
this .attach();
this .render();
},
render: function (){
this .sections.each( function (section, index){
if ( index !== this .current ) {
section.hide();
} else {
this .showSection(index);
};
}, this );
},
attach: function (){
this .tabs.each( function (tab, index){
tab.addEvent( this .options.mouseEvent, this .tabEvent.bindWithEvent( this ,tab));
}, this );
},
tabEvent: function (e,tab){
e.preventDefault();
var index = this .tabs.indexOf(tab);
this .toggleSection(index);
},
toggleSection: function (index){
if ( this .current === index) return ;
this .hideSection( this .current);
this .current = index;
this .showSection( this .current);
},
showSection: function (index){
var tab = this .tabs[index];
var section = this .sections[index];
tab.addClass( this .options.selectedTabCss);
section.addClass( this .options.selectedSectionCss).show();
this .fireEvent( ' onShow ' ,[index,tab,section]);
},
hideSection: function (index){
if (index === false ) return ;
var tab = this .tabs[index];
var section = this .sections[index];
tab.removeClass( this .options.selectedTabCss);
section.removeClass( this .options.selectedSectionCss).hide();
this .fireEvent( ' onHide ' ,[index,tab,section]);
}
});
/* *
* implement effects
*/
Tabs.implement({
showSection: function (index){
var tab = this .tabs[index];
var section = this .sections[index];
switch ( this .options.mvSH) {
case 1 :
section.setStyles({display: ' block ' ,opacity: 0 }).fade( 1 );
tab.morph( this .options.selectedTabCss);
break ;
default :
tab.addClass( this .options.selectedTabCss);
section.addClass( this .options.selectedSectionCss).show();
}
this .fireEvent( ' onShow ' ,[index,tab,section]);
},
hideSection: function (index){
if (index === false ) return ;
var tab = this .tabs[index];
var section = this .sections[index];
switch ( this .options.mvSH) {
case 1 :
section.hide();
tab.morph( this .options.unSelectedTabCss);
break ;
default :
tab.removeClass( this .options.selectedTabCss);
section.removeClass( this .options.selectedSectionCss).hide();
}
this .fireEvent( ' onHide ' ,[index,tab,section]);
}
});
/* *
* implement auto change Tab method to Tabs class
*/
Tabs.implement({
startAuto: function (){
this .attachAuto();
this .start();
},
attachAuto: function (){
this .bindOver = this .stop.bind( this );
this .bindOut = this .start.bind( this );
this .tabs.getParent().addEvents({
' mouseenter ' : this .bindOver,
' mouseleave ' : this .bindOut
});
this .sections.getParent().addEvents({
' mouseenter ' : this .bindOver,
' mouseleave ' : this .bindOut
});
},
start: function (){
this .autoId = this .autoToggle.periodical( this .options.autoInterval * 1000 , this );
},
stop: function (){
$clear( this .autoId);
},
autoToggle: function (){
this .numNext = this .current + 1 ;
this .numNext = this .numNext >= this .sectionsLength ? 0 : this .numNext;
this .toggleSection( this .numNext);
}
});
html代码：
HTML code < style type ="text/css" >
* { margin : 0 ; padding : 0 ; }
p { margin : 10px 0 ; }
body { padding : 10px ; font-size : 12px ; font-family : Arial ; text-align : center ; }
h1 { padding : 0px ; margin : 0px ; }
ul { list-style : none ; }
.divide { width : 762px ; height : 250px ; padding : 10px ; margin : 0 auto ; text-align : left ; position : relative ; }
.divideh3 { position : absolute ; top : -5px ; left : 10px ; width : 200px ; height : 31px ; background-image : url(images/mainxx3.png) ; background-repeat : no-repeat ; background-position : -272px -36px ; }
.tabs { height : 24px ; position : absolute ; right : 3px ; top : 0px ; }
.tabs li { width : 79px ; float : left ; height : 26px ; line-height : 25px ; cursorointer; background : #EEE ; margin : 0 5px ; text-align : center ; border : 0 ; color : #3d3d3d ; }
.tabs li.selected {
background : #F00 ;
height : 26px ; line-height : 25px ; color : #FFF ; background : url(bgxx.gif) no-repeat ;
}
.tabOn {
height : 26px ; line-height : 25px ; color : #FFF ; background : #d61d3d ;
}
.tabOff {
background : #EEE ; border : 0 ; height : 26px ;
line-height : 25px ; color : #3d3d3d ;
}
.sections { width : 762px ; height : 272px ; overflow : hidden ; position : absolute ; top : 26px ; width : 100% ; border-top : 2px solid #d61d3d ; border-left : 2px solid #d61d3d ; }
.sections div { padding : 10px ; }
</ style >
< script type ="text/javascript" src ="../mootools-1.2-core-nc1.js" ></ script >
< script type ="text/javascript" src ="../Element.Shortcuts.js" ></ script >
< script type ="text/javascript" src ="Tabs.js" ></ script >
< script type ="text/javascript" >
document.addEvent( ' domready ' , function (){
var myTabs = new Tabs($$( ' #tabs li ' ),$$( ' #sections div ' ),{
mvSH: 1 ,
autoInterval: 3 ,
selectedTabCss: ' .tabOn ' ,
unSelectedTabCss: ' .tabOff '
});
myTabs.startAuto();
});
</ script >
</ head >
< body >
< div class ="divide" >
< h3 ></ h3 >
< ul id ="tabs" class ="tabs" >
< li >< span > 时尚女装 </ span ></ li >
< li >< span > 男性时尚 </ span ></ li >
< li >< span > 可爱童装 </ span ></ li >
< li >< span > 鞋包配件 </ span ></ li >
< li >< span > 美容用品 </ span ></ li >
< li > 创意家居 </ li >
</ ul >
< div id ="sections" class ="sections" >
< div >< img src ="4.jpg" width ="100%" /></ div >
< div style ="display:none" >< img src ="3.jpg" /></ div >
< div style ="display:none" >< img src ="4.jpg" width ="100%" /></ div >
< div style ="display:none" >< img src ="3.jpg" /></ div >
< div style ="display:none" >< img src ="4.jpg" width ="100%" /></ div >
< div style ="display:none" >< img src ="3.jpg" /></ div >
</ div >
</ div >
遇到一个问题想请教下高手，就是
case 1:
section.hide();
tab.morph(this.options.unSelectedTabCss);
break;
这里加入了形变的动画效果后，选项卡当前状态就是只能用背景颜色background:#d61d3d; .tabOn {
height:26px;line-height:25px;color:#FFF; background:#d61d3d;
}
.tabOff {
background:#EEE; border:0; height:26px;
line-height:25px; color:#3d3d3d;
} 用background:url(bgxx.gif) no-repeat;背景图像无效果，而最终想要得到的效果是:
,我有试过将 var myTabs = new Tabs($$('#tabs li'),$$('#sections div'),{
mvSH:1,
autoInterval:3,
selectedTabCss:'.tabOn',
unSelectedTabCss:'.tabOff'
});改成
var myTabs = new Tabs($$('#tabs li'),$$('#sections div'),{
});
这样是可以实现，但是下面内容框里面的过渡效果也没有了，这样就很逊色了，有那位高手能帮忙看一下，谢谢
本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2010/02/26/1673969.html，如需转载请自行联系原作者
