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

2024-06-02 10:01:58

滑动门：我不理解为什么这样叫。
我就命名为：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="JTabRes1/JMenuTab.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<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.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>

请下载源码察看效果。

JS+CSS实现自动切换的网页滑动门菜单效果代码

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
JS+CSS实现简单滑动门(滑动菜单)效果

本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC
JS+CSS实现带小三角指引的滑动门效果

本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代
JS实现的简洁纵向滑动菜单(滑动门)效果

本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一个"门"的内容存入JS数组中,这样可以减少代码量,但也带来了一个扩展的问题,扩展性方面有待完善,仅供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-zxhd-menu-demo/
JS仿淘宝实现的简单滑动门效果代码

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL
JS+CSS实现简易的滑动门效果代码

本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
js通用滑动门类

滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容
简单通用的JS滑动门代码

复制代码代码如下: <UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav onmousem
javascript 通用滑动门tab类

滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容
基于JavaScript实现滑动门效果

本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下滑动门效果: 原理: 一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示. 假设图片的宽度是120px,其他三道门露出的宽度是80px. 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px. 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变. 当第三道门打开时, 第二道门左边的距离是80px,

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

相关推荐

随机推荐