分页显示代码js

《分页显示代码js》由会员分享，可在线阅读，更多相关《分页显示代码js（31页珍藏版）》请在装配图网上搜索。

1、一个封装了的选项卡效果js井底的蛙/* 选项卡封装 by 井底的蛙 2008-2-4*/opCard = function() this.bind = new Array(); this.index = 0; /默认显示哪个选项卡，从0起先 this.style = new Array(); /, this.overStyle = false; /选项是否有over, out变换样式事务，样式为this.style2 this.overChange = false; /内容是否用over, out干脆激活 this.menu = false; /菜单类型 this.nesting = fals

2、e,false,; /是否嵌套，后面2个参数是指定menu,info的子集深度所用id this.auto = false, 1000; /自动滚动true,2000 this.timerID = null; /自动播放的 this.menutimerID = null; /菜单延时的 this.creat = function(func) var _arrMenu = document.getElementById(this.bind0).getElementsByTagName(this.bind1); var _arrInfo = document.getElementById(this

3、.bind2).getElementsByTagName(this.bind3); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting0 | this.nesting1) / 有选项卡嵌套 / 过滤出须要的数据 var arrMenu = this.nesting0?getChilds(_arrMenu,this.bind0,2):_arrMenu; var arrInfo = this.nesting1?getChilds(_arrInfo,this.bind2,3)

4、:_arrInfo; else var arrMenu = _arrMenu; var arrInfo = _arrInfo; var l = arrMenu.length; if(l!=arrInfo.length)alert(菜单和内容必需拥有相同的数量n假如须要，你可以放一个空的在那占位。) / 修正 if(this.menu)this.auto=false;this.overChange=true; /假如是菜单，则没有自动运行，有over, out干脆激活 / 循环添加各个事务等 for(i=0;il;i+) arrMenui.cName = arrMenui.className;

5、arrMenui.className = (i!=this.index | this.menu)?getClass(arrMenui,this.style0):getClass(arrMenui,this.style1); /加载样式，菜单的话统一样式 if(arrMenui.getAttribute(skip) / 须要跳过的容器 if(this.overStyle | this.overChange) / 有over, out 变更样式 或者 激活 arrMenui.onmouseover = function()changeTitle(this, 2);autoStop(this, 0)

6、; arrMenui.onmouseout = function()changeTitle(this, 0);autoStop(this, 1); arrMenui.onclick = function()if(argLen=1)func() arrInfoi.style.display = none; continue; if(i!=this.index | this.menu)arrInfoi.style.display=none; /隐藏初始化，菜单的话全部隐藏 arrMenui.index = i; /记录自己激活值序号 arrInfoi.index = i; if(this.over

7、Change) /有鼠标over, out事务 arrMenui.onmouseover = function()changeOption(this);my.menu?changeMenu(1):autoStop(this, 0); arrMenui.onmouseout = function()changeOption(this);my.menu?changeMenu(0):autoStop(this, 1); else /onclick触发 arrMenui.onclick = function()changeOption(this);autoStop(this, 0);if(argLen

8、=1)func() if(this.overStyle) / 有over, out 变更样式 arrMenui.onmouseover = function()changeTitle(this, 2);autoStop(this, 0); arrMenui.onmouseout = function()changeTitle(this, 0);autoStop(this, 1); else / 没有over, out 变更样式 if(this.auto0) / 有自动运行 arrMenui.onmouseover = function()autoStop(this, 0); arrMenui.

9、onmouseout = function()autoStop(this, 1); if(this.auto0 | this.menu) /arrinfo 限制自动播放 arrInfoi.onmouseover = function()my.menu?changeMenu(1):autoStop(this, 0); arrInfoi.onmouseout = function()my.menu?changeMenu(0):autoStop(this, 1); /for结束 if(this.auto0) this.timerID = setTimeout(autoMove,this.auto1)

10、 / 自动播放 function autoMove() var n; n = my.index + 1; if(n=l)n=0; while(arrMenun.getAttribute(skip) / 须要跳过的容器 n += 1; if(n=l)n=0; changeOption(arrMenun); my.timerID = setTimeout(autoMove,my.auto1); / onmouseover时，自动播放停止。num：0为over，1为out。 obj短暂无用。 -_-! function autoStop(obj, num) if(!my.auto0)return;

11、/if(obj.index=my.index) num = 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto1); / 变更选项卡 function changeOption(obj) arrMenumy.index.className = getClass(arrMenumy.index,my.style0); /修改旧内容 arrInfomy.index.style.display = none; /隐藏旧内容 obj.className = getClass(obj,my.style1); /修

12、改为新样式 arrInfoobj.index.style.display = ; /显示新内容 my.index = obj.index; /更新当前选择的index /* 只有onclick时，overStyle的onmouseover,onmouseout事务。用来预激活 obj：目标对象。 num：1为over，0为out */ function changeTitle(obj, num) if(!my.overStyle)return; if(obj.index!=my.index)obj.className = getClass(obj,my.stylenum) /* 菜单类型时用

13、obj：目标对象。 num：1为over，0为out */ function changeMenu(num) if(!my.menu)return; num=0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) /关闭菜单 function menuClose() arrInfomy.index.style.display = none; arrMenumy.index.className = getClass(arrMenumy.index,my.style0); / 得到className（防止

14、将原有样式覆盖） function getClass(o, s) if(o.cName=)return s elsereturn o.cName + + s /嵌套状况下得到真正的子集 function getChilds(arrObj, id, num) var depth = 0; var firstObj = my.nestingnum=?arrObj0:document.getElementById(my.nestingnum); /得到第一个子集 do /计算深度 if(firstObj.parentNode.getAttribute(id)=id)breakelsedepth+=1

15、 firstObj = firstObj.parentNode; while(firstObj.tagName.toLowerCase()!=body) / body强制退出。 var t; var arr = new Array(); for(i=0;iarrObj.length;i+) /过滤出须要的数据 t = arrObji, d = 0; do if(t.parentNode.getAttribute(id)=id & d = depth) arr.push(arrObji);break; /得到数据 else if(d=depth)break;d+=1; t = t.parentN

16、ode; while(t.tagName.toLowerCase()!=body) / body强制退出 return arr; window.onload = function() var aa = new opCard(); aa.bind = a1,div,b1,div; aa.style = a1_0,a1_1,a1_0; aa.index = 0; aa.nesting = false,true, aa.creat(); aa =null; / 默认的onclick中，第一个例子 var bba = new opCard(); bba.bind = a2,li,b2,div; bba

17、.style = style1,style2,style3; bba.overStyle = true; bba.creat(); bba = null; / 默认的onclick中，其次个例子 var bbb = new opCard(); bbb.bind = a3,li,b3,div; bbb.style = style1,style2,style3; bbb.overStyle = true; bbb.creat(); bbb = null; / onmousover触发中的例子 var cc = new opCard(); cc.bind = a4,li,b4,div; cc.sty

18、le = style1,style2,style3; cc.overStyle = true; cc.overChange = true; cc.creat(); cc = null; /自动播放auto第一个例子 var dd = new opCard(); dd.bind = a5,li,b5,div; dd.style = style1,style2,style3; dd.auto = true, 3000; dd.creat(); dd = null; /自动播放auto其次个例子 var ee = new opCard(); ee.bind = a6,li,b6,div; ee.st

19、yle = style1,style2,style3; ee.auto = true, 2000; ee.overChange = true; ee.creat(); ee = null; /自动播放auto第三个例子 var ff = new opCard(); ff.bind = a7,li,b7,div; ff.style = style1,style2,style3; ff.auto = true, 1000; ff.overChange = true; ff.overStyle = true; ff.creat(); ff = null; /菜单导航例子 var gg = new o

20、pCard(); gg.bind = a8,li,b8,div; gg.style = style1,style2,style3; gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; /其他应用 var hh = new opCard(); hh.bind = a9,li,a9,li; hh.style = style4,style4,style4; /hh.overStyle = true; hh.auto = true, 1000; hh.creat(); hh = null;bodyfont-size:12px; fon

21、t-family:Verdana,宋体;p,ulmargin:0px; padding:0px;td,divfont-size:12px.a1_0 border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;.a1_1 border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;.testtext-decoration:underl

22、ine;#b1 div.sborder:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;#b1 div.s strongcolor:#0066FF;/* */.style1float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none;

23、 cursor:pointer;.style2float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;.style3float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-st

24、yle-type:none; cursor:pointer;#a2,#a3,#a4,#a5,#a6,#a7,#a8 height:22px;#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 divborder:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;#b8 divborder:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;#b8 div amargin-right:20px

25、;.style4float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF; 简洁介绍 默认的onclick onmousover触发 自动播放auto 菜单导航 关于嵌套 其他应用 一些说明         封装了一个选项卡，不过已经不像选项卡了-_-! 现略微说明下吧，假如不明白的话，旁边有几个例子可能说明起来更清楚些 obj.bind = a1,td,b1,div; 绑定id=a1下的td标签为

26、菜单，绑定id=b1下的div标签为内容，简洁么？ td标签的数量和div标签的数量必需相同 （若不须要显示内容，只显示菜单话，可以这个在td标签上加<td skip=true>） 假如id=a1下的td标签有嵌套表格，这样的话，就不是全部的td都是菜单，这时候须要用下nesting obj.nesting = false,true,; 当标签tag有嵌套时，须要用到这个 比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就须要用到 菜单嵌套为false，内容嵌套为true，且会自动推断出内容标签，多数时候这样就可以了 推断方法为，认定getElementsBy

27、TagName后第一个标签为内容第一项，其他的就用这个第一项的深度来推断 但有些状况下，这样还是不行 我用后面2个参数做id来指定菜单或者内容的第一项nesting = false,true,q2; 这样就确定不会错了（不明白的话看下例子就简洁多了） obj.index = 0; 默认显示第几个选项卡，序号从0起先 obj.style = c1,c2,c3 菜单加载的样式的className： 菜单未选中的className是c1 菜单选中的className是c2 菜单onmouseover的className是c3 obj.overStyle = false; 选项卡是否有onmouseo

28、ver, onmouseout变换样式事务非激活选项卡内容，对应的样式为style2 obj.overChange = false; 选项卡内容是否用onmouseover, onmouseout干脆激活 obj.menu = false; 选项卡是菜单类型 obj.auto = false, 1000; 选项卡是否自动播放，播放速度（毫秒） obj.creat(); 起先生成选项卡，须要onclick触发事务的话，可以obj.creat(函数名) 全部的都会触发 1 2 3 4 这个例子是用onclick触发的并设置overStyle = true;(over，out变更样式,但不激活) v

29、ar bba = new opCard(); bba.bind = a2,li,b2,div; bba.style = style1,style2,style1; bba.overStyle = true; bba.creat(); bba = null; 33333 4444444 1 2 3 4 这个例子是比上面增加skip=true即<li skip=true>4</li>所以选项卡4是没有内容的 你可以为选项卡的文字干脆加上链接，我这里就不加了 222222 33333 4444444 1 2 3 4 这个例子是用onmouseover触发的(over，out干

30、脆激活)并且<li skip=true>3</li>选项卡3不会被激活overStyle = true; var cc = new opCard(); cc.bind = a4,li,b4,div; cc.style = style1,style2,style1; cc.overStyle = true; cc.overChange = true; cc.creat(); cc = null; 33333 4444444 1 2 3 4 1111111我每3秒切换一个选项卡 var ee = new opCard(); ee.bind = a6,li,b6,div; e

31、e.style = style1,style2,style1; ee.auto = true, 2000; ee.overChange = true; ee.creat(); ee = null; 33333我每3秒切换一个选项卡 4444444我每3秒切换一个选项卡 注：鼠标在选项卡随意位置都会使停止播放下面这个结合overChange一起 1 2 3 4 1111111我每2秒切换一个选项卡 var dd = new opCard(); dd.bind = a5,li,b5,div; dd.style = style1,style2,style1; dd.auto = true, 3000

32、; dd.creat(); dd = null; 33333我每2秒切换一个选项卡 4444444我每2秒切换一个选项卡 下面这个再来个<li skip=true>3</li>，且overStyle=true; 1 2 3 4 1111111我每1秒切换一个选项卡 var ff = new opCard(); ff.bind = a7,li,b7,div; ff.style = style1,style2,style1; ff.auto = true, 1000; ff.overChange = true; ff.overStyle = true; ff.creat()

33、; ff = null; 33333我每1秒切换一个选项卡 4444444我每1秒切换一个选项卡 首页 新闻 论坛 联系我们 国内新闻国际新闻消遣新闻体育新闻 蓝色志向blue idea 注：菜单延时一秒关闭这里只是演示，实际可以设置下position什么的。-o-多级菜单不知道能不能支持，没试过 我见过的许多选项卡都不能用来嵌套但还是有些时候会用到的 所以如您所见，这个演示本身就是一个嵌套，效果还不错 比如图片切换什么，不过我太懒了，不写了。 这个能干什么，我也不知道。 新年好啊 快过年了 天好冷啊 大家去抢红包吧 红包！红包！你在哪里啊？ 选项卡标题（或者菜单）必需和选项卡内容的数量相同，否则会出错即使选项卡菜单skip=true，内容也要放一个空的标签占位 其他好像短暂没发觉什么 原来打算加入ajax的，但有些还没想好。 效率的话，应当还行，我这个演示放了几个选项卡，好像还不错 写这个的目的就是以后弄选项卡只要处理样式就可以了，许多选项卡或者切换之类都是大同小异 原来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。 哦，还