类似选项卡的切换效果

【 tulaoshi.com - Web开发 】

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadmeta http-equiv="Content-Type" content="text/html; charset=gb2312"title井底的蛙/titlescript type="text/javascript"/*选项卡封装by 井底的蛙2008-2-4*/opCard = function(){this.bind = new Array();this.index = 0;　//默认显示哪个选项卡，从0开始this.style = new Array();　//["","",""]this.overStyle = false;　//选项是否有over, out变换样式事件，样式为this.style[2]this.overChange = false;　//内容是否用over, out直接激活this.menu = false;　　//菜单类型this.nesting = [false,false,"",""];　//是否嵌套，后面2个参数是指定menu,info的子集深度所用idthis.auto = [false, 1000];　//自动滚动[true,2000]this.timerID = null;　 //自动播放的this.menutimerID = null;　//菜单延时的this.creat = function(func){var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);var my = this, i;var argLen = arguments.length;var arrM = new Array();if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套{ // 过滤出需要的数据var arrMenu = this.nesting[0]？getChilds(_arrMenu,this.bind[0],2):_arrMenu;var arrInfo = this.nesting[1]？getChilds(_arrInfo,this.bind[2],3):_arrInfo;}else{var arrMenu = _arrMenu;var arrInfo = _arrInfo;}var l = arrMenu.length;if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量如果需要，你可以放一个空的在那占位。")}// 修正if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活// 循环添加各个事件等for(i=0;il;i++){arrMenu[i].cName = arrMenu[i].className;arrMenu[i].className = (i!=this.index || this.menu)？getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);　//加载样式，菜单的话统一样式if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器{if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活{arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}}arrMenu[i].onclick = function(){if(argLen==1){func()}}arrInfo[i].style.display = "none";continue;}if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏arrMenu[i].index = i; //记录自己激活值[序号]arrInfo[i].index = i;if(this.overChange) //有鼠标over, out事件{arrMenu[i].onmouseover = function(){changeOption(this);my.menu？changeMenu(1):autoStop(this, 0);}arrMenu[i].onmouseout = function(){changeOption(this);my.menu？changeMenu(0):autoStop(this, 1);}}else //onclick触发{arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}if(this.overStyle) // 有over, out 改变样式{arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}}else // 没有over, out 改变样式{if(this.auto[0]) // 有自动运行{arrMenu[i].onmouseover = function(){autoStop(this, 0);}arrMenu[i].onmouseout = function(){autoStop(this, 1);}}}}if(this.auto[0] || this.menu) //arrinfo 控制自动播放{arrInfo[i].onmouseover = function(){my.menu？changeMenu(1):autoStop(this, 0);}arrInfo[i].onmouseout = function(){my.menu？changeMenu(0):autoStop(this, 1);}}} //for结束if(this.auto[0]){this.timerID = xywTimeout(autoMove,this.auto[1])}// 自动播放function autoMove(){var n;n = my.index + 1;if(n==l){n=0};while(arrMenu[n].getAttribute("skip"))　// 需要跳过的容器{n += 1;if(n==l){n=0};}changeOption(arrMenu[n]);my.timerID = xywTimeout(autoMove,my.auto[1]);}// onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!function autoStop(obj, num){if(!my.auto[0]){return;}//if(obj.index==my.index)num == 0 ？ clearTimeout(my.timerID) : my.timerID = xywTimeout(autoMove,my.auto[1]);}// 改变选项卡function changeOption(obj){arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容arrInfo[my.index].style.display = "none"; //隐藏旧内容obj.className = getClass(obj,my.style[1]);　//修改为新样式arrInfo[obj.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.style[num])}}/*菜单类型时用obj：目标对象。 num：1为over，0为out*/function changeMenu(num){if(!my.menu){return;}num==0？my.menutimerID = xywTimeout(menuClose,1000):clearTimeout(my.menutimerID)}//关闭菜单function menuClose(){arrInfo[my.index].style.display = "none";arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);}// 得到className（防止将原有样式覆盖）function getClass(o, s){if(o.cName==""){return s}else{return o.cName + " " + s}}//嵌套情况下得到真正的子集function getChilds(arrObj, id, num){var depth = 0;var firstObj = my.nesting[num]==""？arrObj[0]:document.getElementById(my.nesting[num]);　//得到第一个子集do //计算深度{if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}firstObj = firstObj.parentNode;}while(firstObj.tagName.toLowerCase()!="body") // body强制退出。var t;var arr = new Array();for(i=0;iarrObj.length;i++) //过滤出需要的数据{t = arrObj[i], d = 0;do{if(t.parentNode.getAttribute("id")==id && d == depth){arr.push(arrObj[i]);break;　//得到数据}else{if(d==depth){break};d+=1;}t = t.parentNode;}while(t.tagName.toLowerCase()!="body") // body强制退出}return arr;}}}window.xywxff = 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.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.style = ["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.style = ["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 opCard();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;}/scriptstyle type="text/css"body{font-size:12px; font-family:Verdana,"宋体";}p,ul{margin:0px; padding:0px;}td,div{font-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;}.test{text-decoration:underline;}#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}#b1 div.s strong{color:#0066FF;}/* */.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}#b8 div a{margin-right:20px;}.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}/style/headbodytable width="100%" border="0" cellspacing="0" cellpadding="0"trtd id="a1" width="140" valign="top" align="center"div class="test"简单介绍/divdiv class="test"默认的onclick/divdiv class="test"onmousover触发/divdiv class="test"自动播放auto/divdiv class="test"菜单导航/divdiv class="test"关于嵌套/divdiv class="test"其他应用/divdiv class="test"一些说明/divdiv class="test" /divdiv class="test" /divdiv class="test" /divdiv class="test" /div/tdtd id="b1" valign="top"div class="s"封装了一个选项卡，不过已经不像选项卡了-_-!!!brbr现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些brbrpstrongobj.bind = ["a1","td","b1","div"];/strongbr绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？brtd标签的数量和div标签的数量必须相同br（若不需要显示内容，只显示菜单话，可以这个在td标签上加td skip="true"）br如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nestingbrbrstrongobj.nesting = [false,true,"",""];/strongbr当标签tag有嵌套时，需要用到这个br比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到br菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了br判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断br但有些情况下，这样还是不行br我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];br这样就肯定不会错了（不明白的话看下例子就简单多了）brbrstrongobj.index = 0;/strongbr默认显示第几个选项卡，序号从0开始brbrstrongobj.style = ["c1","c2","c3"]/strongbr菜单加载的样式的className：br菜单未选中的className是c1br菜单选中的className是c2br菜单onmouseover的className是c3brbrstrongobj.overStyle = false;/strongbr选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]brbrstrongobj.overChange = false;/strongbr选项卡内容是否用onmouseover, onmouseout直接激活brbrstrongobj.menu = false;/strongbr选项卡是菜单类型brbrstrongobj.auto = [false, 1000];/strongbr选项卡是否自动播放，播放速度（毫秒）brbrstrongobj.creat();/strongbr开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)br所有的都会触发/p/divdiv class="s"!--默认的onclick中，第一个例子--div id="a2"ulli1/lili2/lili3/lili4/li/ul/divdiv id="b2"div这个例子是用onclick触发的br并设置overStyle = true;br(over，out改变样式,但不激活)/divdivvar bba = new opCard();brbba.bind = ["a2","li","b2","div"];brbba.style = ["style1","style2","style1"];brbba.overStyle = true;brbba.creat();brbba = null;/divdiv33333/divdiv4444444/div/divbr!--默认的onclick中，第二个例子--div id="a3"ulli1/lili2/lili3/lili skip="true"4/li/ul/divdiv id="b3"div这个例子是比上面增加skip="true"br即li skip="true"4/libr所以选项卡4是没有内容的br你可以为选项卡的文字直接加上链接，我这里就不加了/divdiv222222/divdiv33333/divdiv4444444/div/div/divdiv class="s"!--onmousover触发中的例子--div id="a4"ulli1/lili2/lili skip="true"3/lili4/li/ul/divdiv id="b4"div这个例子是用onmouseover触发的br(over，out直接激活)br并且li skip="true"3/li[选项卡3不会被激活]broverStyle = true;/divdivvar cc = new opCard();brcc.bind = ["a4","li","b4","div"];brcc.style = ["style1","style2","style1"];brcc.overStyle = true;brcc.overChange = true;brcc.creat();brcc = null;/divdiv33333/divdiv4444444/div/div/divdiv class="s"!--自动播放auto第一个例子--div id="a5"ulli1/lili2/lili3/lili4/li/ul/divdiv id="b5"div1111111br我每3秒切换一个选项卡/divdivvar ee = new opCard();bree.bind = ["a6","li","b6","div"];bree.style = ["style1","style2","style1"];bree.auto = [true, 2000];bree.overChange = true;bree.creat();bree = null;/divdiv33333br我每3秒切换一个选项卡/divdiv4444444br我每3秒切换一个选项卡/div/divdiv注：strong鼠标在选项卡任意位置都会使停止播放/strongbrbr下面这个结合overChange一起/div!--自动播放auto第二个例子--div id="a6"ulli1/lili2/lili3/lili4/li/ul/divdiv id="b6"div1111111br我每2秒切换一个选项卡/divdivvar dd = new opCard();brdd.bind = ["a5","li","b5","div"];brdd.style = ["style1","style2","style1"];brdd.auto = [true, 3000];brdd.creat();brdd = null;br/divdiv33333br我每2秒切换一个选项卡/divdiv4444444br我每2秒切换一个选项卡/div/divdivbr下面这个再来个li skip="true"3/li，且overStyle=true;/div!--自动播放auto第三个例子--div id="a7"ulli1/lili2/lili skip="true"3/lili4/li/ul/divdiv id="b7"div1111111br我每1秒切换一个选项卡/divdivvar ff = new opCard();brff.bind = ["a7","li","b7","div"];brff.style = ["style1","style2","style1"];brff.auto = [true, 1000];brff.overChange = true;brff.overStyle = true;brff.creat();brff = null;/divdiv33333br我每1秒切换一个选项卡/divdiv4444444br我每1秒切换一个选项卡/div/div/div!--菜单导航的例子--div class="s"div id="a8"ulli skip="true"首页/lili新闻/lili论坛/lili skip="true"联系我们/li/ul/divdiv id="b8"div/divdiva href="http://cms.ddvip.com/index.php#"国内新闻/aa href="http://cms.ddvip.com/index.php#"国际新闻/aa href="http://cms.ddvip.com/index.php#"娱乐新闻/aa href="http://cms.ddvip.com/index.php#"体育新闻/a/divdiva href="http://cms.ddvip.com/index.php#"蓝色理想/aa href="http://cms.ddvip.com/index.php#"blue idea/a/divdiv/div/divdivstrong注：菜单延时一秒关闭/strongbr这里只是演示，实际可以设置下position什么的。-o-br多级菜单不知道能不能支持，没试过/div/divdiv class="s"我见过的许多选项卡都不能用来嵌套br但还是有些时候会用到的br所以如您所见，这个演示本身就是一个嵌套，效果还不错/div!--其他应用--div class="s"比如图片切换什么，不过我太懒了，不写了。。。br这个能干什么，我也不知道。。div id="a9"li新年好啊/lili快过年了/lili天好冷啊/lili大家去抢红包吧/lili红包~！红包~！你在哪里啊？/li/div/divdiv class="s"选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错br即使选项卡菜单skip="true"，内容也要放一个空的标签占位br其他好像暂时没发现什么brbr本来打算加入ajax的，但有些还没想好。br效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错brbr写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异br本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。brbr哦，还有选项卡是附加样式，不会取消原本设置的样式br如左边的下划线是原有的样式/divdiv class="s"啥都没有1/divdiv class="s"啥都没有2/divdiv class="s"啥都没有3/divdiv class="s"啥都没有4/div/td/tr/table/body/html