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

　　滑动门：我不理解为什么这样叫。

　　我就命名为：JMenuTab吧，因为写它是为了当我的菜单。

　　IE6,FireFox下测试通过。

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>无标题文档</title>

<!--

　　body {

　　margin: 0px;

　　}

　　-->

　　</style>

　　</head>

　　<body>

　　<tr>

　　</tr>

　　</table>

　　<div id="page1">大大小小多多少少<br />

　　人口手足</div>

　　<div id="page2">ABCDEFG</div>

　　<tr>

　　<td>JMenuTab 帮助：</td>

　　</tr>

　　<tr>

　　<td>Author:xling　Blog:http://xling.blueidea.com 　2007/05/23 </td>

　　</tr>

　　<tr>

　　<td>写这个程序只是为了解决燃眉之急（汉，虽然是急，我还是写了一天）！</td>

　　</tr>

　　<tr>

　　<td>程序中用到图片是修改了网上现有图片，所以，外表和某些网站上的一样，请不要见怪。因为除了图片，全是原创(不曾参考任何类似程序)！</td>

　　</tr>

　　<tr>

　　<td>IE6,Firefox下测试通过。</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<td>var menuTab = new JMenuTab(null,null,"menuBar");<br />

　　menuTab.create();<br />

　　menuTab.addTab("首页");<br />

　　menuTab.addTab("组织架构","page1");<br />

　　menuTab.addTab("员工信息","page2");<br />

　　menuTab.addTab("业务知识","page3");

　　<br />

　　menuTab.addTab("Help","pageHelp");<br />

　　menuTab.setActiveTab(2);</td>

　　</tr>

　　</table>

　　</div>

　　</body>

　　</html>

　　function JMenuTab(pWidth,pHeight,pBody){

　　var self = this;

　　//________________________________________________

　　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);

　　</script>

　　请下载源码察看效果。

教程首页更多教程