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


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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<link href=><style type="text/css"> 
<!-- 
body { 
    margin: 0px; 
} 
--> 
</style> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="200"> </td> 
    <td id="menuBar"></td> 
  </tr> 
</table> 

<div id="page1">大大小小多多少少<br /> 
人口手足</div> 
<div id="page2">ABCDEFG</div> 
<div id="page3"><img src="loading.gif" /></div> 
<div id="pageHelp"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <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> 
    <td>调用方法(注意顺序)：</td> 
  </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> 
<script language="javascript" type="text/javascript"> 
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.
上一个：用javascript实现鼠标框选
下一个：attachEvent的使用方法与传递参数[IE|firefox]
更多图片编程知识: