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

滑动门：我不理解为什么这样叫。
我就命名为：JMenuTab吧，因为写它是为了当我的菜单。

IE6,FireFox下测试通过。

复制代码 代码如下:

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










  
    
    
  

大大小小多多少少

人口手足

ABCDEFG

  
    
    
  
    
  
  
    
    
  
    
    
  
    
  
  
    
  
  
    
  

JMenuTab 帮助：

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

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

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

IE6,Firefox下测试通过。

调用方法(注意顺序)：

var menuTab = new JMenuTab(null,null,"menuBar");

menuTab.create();

menuTab.addTab("首页");

menuTab.addTab("组织架构","page1");

menuTab.addTab("员工信息","page2");

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


menuTab.addTab("Help","pageHelp");

menuTab.setActiveTab(2);

<script> <BR>function JMenuTab(pWidth,pHeight,pBody){ <BR> var self = this; <br><br> //________________________________________________ <BR> var width = pWidth; <BR> var height = pHeight; <br><br> var titleHeight = 24; <BR> //________________________________________________ <BR> var oOutline = null; <BR> var oTitleOutline = null; <BR> var oPageOutline = null; <BR> var oTitleArea = null; <BR> var oPageArea = null; <br><br> var tabArray = new Array(); <BR> var activedTab = null; <BR> //________________________________________________ <br><br> var $ = function(pObjId){ <BR> return document.getElementById(pObjId); <BR> } <br><br> //________________________________________________ <br><br> var body = $(pBody) || document.body; <br><br> //________________________________________________ <br><br> var htmlObject = function(pTagName){ <BR> return document.createElement(pTagName); <BR> } <br><br> //________________________________________________ <br><br> var isRate = function(pRateString){ <BR> if(!isNaN(pRateString)) return false; <BR> if(pRateString.substr(pRateString.length-1,1) != "%") <BR> return false; <BR> if(isNaN(pRateString.substring(0,pRateString.length - 1))) <BR> return false; <BR> return true; <BR> } <br><br> //________________________________________________ <br><br> var createOutline = function(){ <BR> oOutline = htmlObject("DIV"); <BR> body.appendChild(oOutline); <BR> oOutline.className = "oOutline"; <BR> } <br><br> //________________________________________________ <br><br> var createTitleOutline = function(){ <BR> oTitleOutline = htmlObject("DIV"); <BR> oOutline.appendChild(oTitleOutline); <BR> oTitleOutline.className = "oTitleOutline"; <br><br> var vTable = htmlObject("TABLE"); <BR> oTitleOutline.appendChild(vTable); <BR> vTable.width = "100%"; <BR> vTable.border = 0; <BR> vTable.cellSpacing = 0; <BR> vTable.cellPadding = 0; <br><br> var vTBody = htmlObject("TBODY"); <BR> vTable.appendChild(vTBody); <br><br> var vTr1 = htmlObject("TR"); <BR> vTBody.appendChild(vTr1); <br><br> var vTdTopLeft = htmlObject("TD"); <BR> vTr1.appendChild(vTdTopLeft); <BR> vTdTopLeft.height = titleHeight; <BR> vTdTopLeft.className = "oTopLeft"; <br><br> oTitleArea = htmlObject("TD");///////////////////////////////// <BR> vTr1.appendChild(oTitleArea); <BR> oTitleArea.className = "oTitleArea"; <br><br> var vTdTopRight = htmlObject("TD"); <BR> vTr1.appendChild(vTdTopRight); <BR> vTdTopRight.className = "oTopRight"; <BR> } <br><br> this.setTitleHeight = function(pHeight){ <BR> //设置标题区域的高度 <BR> } <br><br> //________________________________________________ <br><br> var tabBtn_click = function(){ <BR> self.setActiveTab(this.index); <BR> } <br><br> var tabBtn_mouseover = function(){ <BR> if(this.className =="oTabBtnActive") <BR> return; <br><br> this.className = "oTabBtnHover"; <BR> } <br><br> var tabBtn_mouseout = function(){ <BR> if(this.className =="oTabBtnActive") <BR> return; <BR> this.className = "oTabBtn"; <BR> } <BR> //________________________________________________ <br><br> var createTabBtn = function(pLabel,pTabPage){ <BR> var vTabBtn = htmlObject("DIV"); <BR> oTitleArea.appendChild(vTabBtn); <BR> vTabBtn.className = "oTabBtn"; <BR> vTabBtn.index = tabArray.length; <BR> vTabBtn.tabPage = pTabPage; <BR> vTabBtn.onclick = tabBtn_click; <BR> vTabBtn.onmouseover = tabBtn_mouseover; <BR> vTabBtn.onmouseout = tabBtn_mouseout; <br><br> tabArray.push(vTabBtn); <br><br> var vTabBtnL = htmlObject("DIV"); <BR> vTabBtn.appendChild(vTabBtnL); <BR> vTabBtnL.className = "oTabBtnLeft"; <br><br> vTabBtnC = htmlObject("DIV"); <BR> vTabBtn.appendChild(vTabBtnC); <BR> vTabBtnC.className = "oTabBtnCenter"; <BR> vTabBtnC.innerHTML = pLabel; <br><br> vTabBtnR = htmlObject("DIV"); <BR> vTabBtn.appendChild(vTabBtnR); <BR> vTabBtnR.className = "oTabBtnRight"; <BR> } <br><br> <BR> var createPageOutline = function(){ <BR> oPageOutline = htmlObject("DIV"); <BR> oOutline.appendChild(oPageOutline); <BR> oPageOutline.className = "oPageOutline"; <br><br> var vTable = htmlObject("TABLE"); <BR> oPageOutline.appendChild(vTable); <BR> vTable.width = "100%"; <BR> vTable.border = 0; <BR> vTable.cellSpacing = 0; <BR> vTable.cellPadding = 0; <BR> vTable.style.borderCollapse = "collapse"; <BR> vTable.style.tableLayout="fixed"; <br><br> var vTBody = htmlObject("TBODY"); <BR> vTable.appendChild(vTBody); <br><br> var vTr1 = htmlObject("TR"); <BR> vTBody.appendChild(vTr1); <br><br> var vTdBottomLeft = htmlObject("TD"); <BR> vTr1.appendChild(vTdBottomLeft); <BR> vTdBottomLeft.className = "oBottomLeft"; <BR> vTdBottomLeft.rowSpan = 2; <br><br> oPageArea = htmlObject("TD");/////////////////////////////////////// <BR> vTr1.appendChild(oPageArea); <BR> oPageArea.className = "oPageArea"; <BR> if(oPageArea.filters) <BR> oPageArea.style.cssText = "FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');"; <BR> oPageArea.height = 10; <br><br> var vTdBottomRight = htmlObject("TD"); <BR> vTr1.appendChild(vTdBottomRight); <BR> vTdBottomRight.className = "oBottomRight"; <BR> vTdBottomRight.rowSpan = 2; <br><br> var vTr2 = htmlObject("TR"); <BR> vTBody.appendChild(vTr2); <br><br> var vTdBottomCenter = htmlObject("TD"); <BR> vTr2.appendChild(vTdBottomCenter); <BR> vTdBottomCenter.className = "oBottomCenter"; <BR> } <br><br> //________________________________________________ <br><br> this.addTab = function (pLabel,pPageBodyId){ <BR> createTabBtn(pLabel,pPageBodyId); <BR> if($(pPageBodyId)){ <BR> oPageArea.appendChild($(pPageBodyId)); <BR> $(pPageBodyId).style.display = "none"; <BR> } <BR> } <br><br> //________________________________________________ <br><br> this.setActiveTab = function(pIndex){ <BR> if(oPageArea.filters) <BR> oPageArea.filters[0].apply(); <br><br> if(activedTab != null){ <BR> activedTab.className = "oTabBtn"; <BR> if($(activedTab.tabPage)) <BR> $(activedTab.tabPage).style.display = "none"; <BR> } <BR> activedTab = tabArray[pIndex]; <BR> activedTab.className = "oTabBtnActive"; <BR> if($(activedTab.tabPage)) <BR> $(activedTab.tabPage).style.display = ""; <br><br> if(oPageArea.filters) <BR> oPageArea.filters[0].play(duration=1); <BR> }; <br><br> //________________________________________________ <br><br> <BR> this.create = function(){ <BR> createOutline(); <BR> createTitleOutline(); <BR> createPageOutline(); <BR> } <BR>} <br><br>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("ISO系统"); <BR> menuTab.addTab("办公环境"); <BR> menuTab.addTab("公司新闻"); <BR> menuTab.addTab("公共政策"); <BR> menuTab.addTab("链接总部"); <BR> menuTab.addTab("Help","pageHelp"); <BR> menuTab.setActiveTab(2); <BR></script>

请下载源码察看效果。