一个js实现的所谓的滑动门

//________________________________________________
varwidth=pWidth;
varheight=pHeight;

vartitleHeight=24;
//________________________________________________
varoOutline=null;
varoTitleOutline=null;
varoPageOutline=null;
varoTitleArea=null;
varoPageArea=null;

vartabArray=newArray();
varactivedTab=null;
//________________________________________________

var$=function(pObjId){
returndocument.getElementById(pObjId);
}

//________________________________________________

varbody=$(pBody)||document.body;

//________________________________________________

varhtmlObject=function(pTagName){
returndocument.createElement(pTagName);
}

//________________________________________________

varisRate=function(pRateString){
if(!isNaN(pRateString))returnfalse;
if(pRateString.substr(pRateString.length-1,1)!="%")
returnfalse;
if(isNaN(pRateString.substring(0,pRateString.length-1)))
returnfalse;
returntrue;
}

//________________________________________________

varcreateOutline=function(){
oOutline=htmlObject("DIV");
body.appendChild(oOutline);
oOutline.className="oOutline";
}

//________________________________________________

varcreateTitleOutline=function(){
oTitleOutline=htmlObject("DIV");
oOutline.appendChild(oTitleOutline);
oTitleOutline.className="oTitleOutline";

varvTable=htmlObject("TABLE");
oTitleOutline.appendChild(vTable);
vTable.width="100%";
vTable.border=0;
vTable.cellSpacing=0;
vTable.cellPadding=0;

varvTBody=htmlObject("TBODY");
vTable.appendChild(vTBody);

varvTr1=htmlObject("TR");
vTBody.appendChild(vTr1);

varvTdTopLeft=htmlObject("TD");
vTr1.appendChild(vTdTopLeft);
vTdTopLeft.height=titleHeight;
vTdTopLeft.className="oTopLeft";

oTitleArea=htmlObject("TD");/////////////////////////////////
vTr1.appendChild(oTitleArea);
oTitleArea.className="oTitleArea";

varvTdTopRight=htmlObject("TD");
vTr1.appendChild(vTdTopRight);
vTdTopRight.className="oTopRight";
}

this.setTitleHeight=function(pHeight){
//设置标题区域的高度
}

//________________________________________________

vartabBtn_click=function(){
self.setActiveTab(this.index);
}

vartabBtn_mouseover=function(){
if(this.className=="oTabBtnActive")
return;

this.className="oTabBtnHover";
}

vartabBtn_mouseout=function(){
if(this.className=="oTabBtnActive")
return;
this.className="oTabBtn";
}
//________________________________________________

varcreateTabBtn=function(pLabel,pTabPage){
varvTabBtn=htmlObject("DIV");
oTitleArea.appendChild(vTabBtn);
vTabBtn.className="oTabBtn";
vTabBtn.index=tabArray.length;
vTabBtn.tabPage=pTabPage;
vTabBtn.onclick=tabBtn_click;
vTabBtn.onmouseover=tabBtn_mouseover;
vTabBtn.onmouseout=tabBtn_mouseout;

tabArray.push(vTabBtn);

varvTabBtnL=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnL);
vTabBtnL.className="oTabBtnLeft";

vTabBtnC=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnC);
vTabBtnC.className="oTabBtnCenter";
vTabBtnC.innerHTML=pLabel;

vTabBtnR=htmlObject("DIV");
vTabBtn.appendChild(vTabBtnR);
vTabBtnR.className="oTabBtnRight";
}

varcreatePageOutline=function(){
oPageOutline=htmlObject("DIV");
oOutline.appendChild(oPageOutline);
oPageOutline.className="oPageOutline";

varvTable=htmlObject("TABLE");
oPageOutline.appendChild(vTable);
vTable.width="100%";
vTable.border=0;
vTable.cellSpacing=0;
vTable.cellPadding=0;
vTable.style.borderCollapse="collapse";
vTable.style.tableLayout="fixed";

varvTBody=htmlObject("TBODY");
vTable.appendChild(vTBody);

varvTr1=htmlObject("TR");
vTBody.appendChild(vTr1);

varvTdBottomLeft=htmlObject("TD");
vTr1.appendChild(vTdBottomLeft);
vTdBottomLeft.className="oBottomLeft";
vTdBottomLeft.rowSpan=2;

oPageArea=htmlObject("TD");///////////////////////////////////////
vTr1.appendChild(oPageArea);
oPageArea.className="oPageArea";
if(oPageArea.filters)
oPageArea.style.cssText="FILTER:progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward');";
oPageArea.height=10;

varvTdBottomRight=htmlObject("TD");
vTr1.appendChild(vTdBottomRight);
vTdBottomRight.className="oBottomRight";
vTdBottomRight.rowSpan=2;

varvTr2=htmlObject("TR");
vTBody.appendChild(vTr2);

varvTdBottomCenter=htmlObject("TD");
vTr2.appendChild(vTdBottomCenter);
vTdBottomCenter.className="oBottomCenter";
}

//________________________________________________

this.addTab=function(pLabel,pPageBodyId){
createTabBtn(pLabel,pPageBodyId);
if($(pPageBodyId)){
oPageArea.appendChild($(pPageBodyId));
$(pPageBodyId).style.display="none";
}
}

//________________________________________________

this.setActiveTab=function(pIndex){
if(oPageArea.filters)
oPageArea.filters[0].apply();

if(activedTab!=null){
activedTab.className="oTabBtn";
if($(activedTab.tabPage))
$(activedTab.tabPage).style.display="none";
}
activedTab=tabArray[pIndex];
activedTab.className="oTabBtnActive";
if($(activedTab.tabPage))
$(activedTab.tabPage).style.display="";

if(oPageArea.filters)
oPageArea.filters[0].play(duration=1);
};

//________________________________________________

this.create=function(){
createOutline();
createTitleOutline();
createPageOutline();
}
}

varmenuTab=newJMenuTab(null,null,"menuBar");
menuTab.create();
menuTab.addTab("首页");
menuTab.addTab("组织架构","page1");
menuTab.addTab("员工信息","page2");
menuTab.addTab("业务知识","page3");
menuTab.addTab("ISO系统");
menuTab.addTab("办公环境");
menuTab.addTab("公司新闻");
menuTab.addTab("公共政策");
menuTab.addTab("链接总部");
menuTab.addTab("Help","pageHelp");
menuTab.setActiveTab(2);

请下载源码察看效果。