一个js实现的所谓的滑动门_javascript技巧

IE6,FireFox下测试通过。
代码如下:

大大小小多多少少

人口手足
ABCDEFG

//________________________________________________
var width = pWidth;
var height = pHeight;

var titleHeight = 24;
//________________________________________________
var oOutline = null;
var oTitleOutline = null;
var oPageOutline = null;
var oTitleArea = null;
var oPageArea = null;

var tabArray = new Array();
var activedTab = null;
//________________________________________________

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

//________________________________________________

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

//________________________________________________

var htmlObject = function(pTagName){
return document.createElement(pTagName);
}

//________________________________________________

var isRate = function(pRateString){
if(!isNaN(pRateString)) return false;
if(pRateString.substr(pRateString.length-1,1) != "%")
return false;
if(isNaN(pRateString.substring(0,pRateString.length - 1)))
return false;
return true;
}

//________________________________________________

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

//________________________________________________

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

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

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

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

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

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

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

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

//________________________________________________

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

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

this.className = "oTabBtnHover";
}

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

var createTabBtn = function(pLabel,pTabPage){
var vTabBtn = 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);

var vTabBtnL = 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";
}

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

var vTable = 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";

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

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

var vTdBottomLeft = 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;

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

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

var vTdBottomCenter = 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();
}
}

var menuTab = new JMenuTab(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);

请下载源码察看效果。