滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“
第五层内容
”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。
- 滑动门
- 滑动门
- 滑动门
- 滑动门
- 滑动门
第一层内容
第二层内容
第三层内容
第四层内容
第五层内容
<script type="text/javascript"> <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></script>
首页
- 嘿嘿，无视容器原始class值。
测试
- 继续无视h3原始class值。
无聊
- h3没有值也可以～
傻蛋
- div没有值一样可以～
首页
嘿嘿，无视h3原始class值。
测试
继续无视div原始class值。
无聊
h3没有值也可以～
傻蛋
<script type="text/javascript"> <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></script>
