滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“ 滑动门”、“ 第五层内容 ”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。 滑动门 <br /> <br />h1, h2, h3, h4, h5, h6 { <br /> font-weight:bold; <br /> margin:0px; <br /> padding:0px; <br /> font-size:12px; <br />} <br />ul, li { <br /> margin:0px; <br /> padding:0px; <br />} <br />li { <br /> list-style-type:none; <br />} <br />h1 { <br /> margin:10px; <br /> padding-right:10px; <br /> padding-bottom:5px; <br /> border-bottom:1px dotted #ccc; <br />} <br />.cont { <br /> padding:10px; <br />} <br />.hidden { <br /> display:none; <br />} <br />.scrolldoorFrame { <br /> width:400px; <br /> overflow:hidden; <br />} <br />.scrollUl { <br /> width:400px; <br /> border-bottom:1px solid #CCC; <br /> overflow:hidden; <br /> height:35px; <br />} <br />.scrollUl li { <br /> float:left; <br /> background-color: #f6f6f6; <br /> width: 80px; <br /> text-align: center; <br />} <br />.bor03 { <br /> border:1px solid #ccc; <br /> border-top-width:0px; <br />} <br />.sd01 { <br /> cursor:pointer; <br /> border:1px solid #CCC; <br /> background:#FFF; <br /> margin:5px; <br /> padding:2px; <br /> font-weight:bold; <br />} <br />.sd02 { <br /> cursor:pointer; <br /> border:0px solid #CCC; <br /> margin:5px; <br /> padding:2px; <br />} <br /> <br />#tab01 { <br /> position:relative; <br /> width:200px; <br /> border:solid #ccc; <br /> border-width:0 1px 1px; <br />} <br />#tab01 h4 { <br /> height:18px; <br /> line-height:18px; <br /> border:solid #ccc; <br /> border-width:1px 0; <br /> margin-bottom:-1px; <br /> text-align:center; <br /> background:#f6f6f6; <br /> cursor:pointer; <br />} <br />#tab01 h4.up { <br /> color:#c00; <br />} <br />#tab01 ol { <br /> display:none; <br /> height:54px; <br /> padding:5px; <br /> color:#666; <br />} <br />#tab01 ol.up { <br /> display:block; <br />} <br /> <br />#tab02 { <br /> position:relative; <br /> width:100px; <br />} <br />#tab02 h3 { <br /> position:relative; <br /> z-index:1; <br /> height:16px; <br /> padding-top:4px; <br /> margin-bottom:-1px; <br /> border:solid #ccc; <br /> border-width:1px 0 1px 1px; <br /> text-align:center; <br /> font-family:宋体; <br /> background:#eee; <br /> cursor:pointer; <br />} <br />#tab02 h3.up { <br /> z-index:3; <br /> color:#c00; <br /> background:#fff; <br />} <br />#tab02 div.tab { <br /> display:none; <br /> position:absolute; <br /> left:99px; <br /> top:0; <br /> z-index:2; <br /> width:300px; <br /> height:200px; <br /> padding:5px; <br /> border:solid 1px #ccc; <br /> color:#666; <br />} <br />#tab02 div.tab.up { <br /> display:block; <br />} <p class="sycode"> --> <br /> 滑动门 滑动门 滑动门 滑动门 滑动门 第一层内容 第二层内容 第三层内容 第四层内容 第五层内容 <br />function scrollDoor(){ <br />} <br />scrollDoor.prototype = { <br />sd : function(menus,divs,openClass,closeClass){ <br /> var _this = this; <br /> for(var i = 0 ; i < menus.length ; i++) <br /> { <br /> _this.$(menus[i]).value = i; <br /> _this.$(menus[i]).onmouseover = function(){ <br /> <br /> for(var j = 0 ; j < menus.length ; j++) <br /> { <br /> _this.$(menus[j]).className = closeClass; <br /> _this.$(divs[j]).style.display = "none"; <br /> } <br /> _this.$(menus[this.value]).className = openClass; <br /> _this.$(divs[this.value]).style.display = "block"; <br /> } <br /> } <br /> }, <br />$ : function(oid){ <br /> if(typeof(oid) == "string") <br /> return document.getElementByIdx(oid); <br /> return oid; <br />} <br />} <br />window.onload = function(){ <br />var SDmodel = new scrollDoor(); <br />SDmodel.sd([ "m01","m02","m03","m04","m05"],[ "c01","c02","c03","c04","c05"],"sd01","sd02"); <br />SDmodel.sd([ "mm01","mm02","mm03","mm04","mm05"],[ "cc01","cc02","cc03","cc04","cc05"],"sd01","sd02"); <br />SDmodel.sd([ "mmm01","mmm02","mmm03","mmm04","mmm05"],[ "ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02"); <br />} <br /> 首页 嘿嘿，无视容器原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ 傻蛋 div没有值一样可以～ 首页 嘿嘿，无视h3原始class值。 测试 继续无视div原始class值。 无聊 h3没有值也可以～ 傻蛋 class值相似一样也可以～ 指定class后，即时再多一个div也行。 <br />function Pid(id,tag){ <br /> if(!tag){ <br /> return document.getElementByIdx(id); <br /> } <br /> else{ <br /> return document.getElementByIdx(id).getElementsByTagName_r(tag); <br /> } <br />} <p class="sycode"> function tab(id,hx,box,iClass,s,pr){ <br /> var hxs=Pid(id,hx); <br /> var boxs=Pid(id,box); <br /> if(!iClass){ // 如果不指定class，则： <br /> boxsClass=boxs; // 直接使用box作为容器 <br /> } <br /> else{ // 如果指定class，则： <br /> var boxsClass = []; <br /> for(i=0;i<boxs.length;i++){ <br /> if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配 <br /> boxsClass.push(boxs[i]); <br /> } <br /> } <br /> } <br /> if(!pr){ // 如果不指定预展开容器，则： <br /> go_to(0); // 默认展开序列 <br /> yy(); <br /> } <br /> else { <br /> go_to(pr); <br /> yy(); <br /> } <br /> function yy(){ <br /> for(var i=0;i<hxs.length;i++){ <br /> hxs[i].temp=i; <br /> if(!s){// 如果不指定事件，则： <br /> s="onmouseover"; // 使用默认事件 <br /> hxs[i][s]=function(){ <br /> go_to(this.temp); <br /> } <br /> } <br /> else{ <br /> hxs[i][s]=function(){ <br /> go_to(this.temp); <br /> } <br /> } <br /> } <br /> } <br /> function go_to(pr){ <br /> for(var i=0;i<hxs.length;i++){ <br /> if(!hxs[i].tmpClass){ <br /> hxs[i].tmpClass=hxs[i].className+=" "; <br /> boxsClass[i].tmpClass=boxsClass[i].className+=" "; <br /> } <br /> if(pr==i){ <br /> hxs[i].className+=" up"; // 展开状态：标题 <br /> boxsClass[i].className+=" up"; // 展开状态：容器 <br /> } <br /> else { <br /> hxs[i].className=hxs[i].tmpClass; <br /> boxsClass[i].className=boxsClass[i].tmpClass; <br /> } <br /> } <br /> } <br />} <br />tab("tab01","h3","div","","onclick",2); tab("tab01","h4","ol");tab("tab02","h3","div","tab"); <br />//--> <br />
