div CSS sliding door special effect_html/css_WEB-ITnose

滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“ 滑动门 ”、“ 第五层内容 " If you delete these two, you must also delete m05, mm05, mmm05 and c05, cc05, ccc05 in the JS special effects to display them normally.

sliding door

h1, h2, h3, h4, h5, h6 { font-weight:bold; margin:0px; padding:0px; font-size:12px; } ul , li { margin:0px; padding:0px; } li { list-style-type:none; } h1 { margin :10px; padding-right:10px; padding-bottom:5px; border-bottom:1px dotted #ccc; } .cont { padding:10px; } .hidden { display:none; } .scrolldoorFrame { width:400px; overflow:hidden; } .scrollUl { width:400px; border-bottom:1px solid #CCC; overflow:hidden; height:35px; } .scrollUl li { float: left; background-color: #f6f6f6; width: 80px; text-align: center; } .bor03 { border:1px solid #ccc; border-top-width:0px; } .sd01 { cursor:pointer; border:1px solid #CCC; background:#FFF; margin:5px ; padding:2px; font-weight:bold; } .sd02 { cursor:pointer; border:0px solid #CCC; margin:5px ; padding:2px; }

#tab01 { position:relative; width:200px; border:solid #ccc; border-width :0 1px 1px; } #tab01 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0 ; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; } #tab01 h4.up { color:#c00; } #tab01 ol { display:none; height:54px; padding:5px; color:#666; } #tab01 ol.up { display:block; }

#tab02 { position:relative; width:100px; } #tab02 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border :solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; } #tab02 h3.up { z-index:3; color:#c00; background:#fff; } #tab02 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height: 200px; padding:5px; border:solid 1px #ccc; color:#666; } #tab02 div.tab.up { display:block; }

--> 滑动门 滑动门 滑动门 滑动门 滑动门 第一层内容 第二层内容 第三层内容 第四层内容 第五层内容 function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; for(var i = 0 ; i { _this.$(menus[i]).value = i; _this.$(menus[i]).onmouseover = function(){ for(var j = 0 ; j { _this.$(menus[j]).className = closeClass; _this.$(divs[j]).style.display = "none"; } _this.$(menus[this.value]).className = openClass; _this.$(divs[this.value]).style.display = "block"; } } }, $ : function(oid){ if(typeof(oid) == "string") return document.getElementByIdx(oid); return oid; } } window.onload = function(){ var SDmodel = new scrollDoor(); SDmodel.sd([ "m01","m02","m03","m04","m05"],[ "c01","c02","c03","c04","c05"],"sd01","sd02"); SDmodel.sd([ "mm01","mm02","mm03","mm04","mm05"],[ "cc01","cc02","cc03","cc04","cc05"],"sd01","sd02"); SDmodel.sd([ "mmm01","mmm02","mmm03","mmm04","mmm05"],[ "ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02"); }

首页 嘿嘿，无视容器原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ 傻蛋 div没有值一样可以～

首页 嘿嘿，无视h3原始class值。

测试 继续无视div原始class值。

无聊 h3没有值也可以～

傻蛋 class值相似一样也可以～

指定class后，即时再多一个div也行。

function Pid(id,tag){ if(!tag){ return document.getElementByIdx(id); } else{ return document.getElementByIdx(id).getElementsByTagName_r(tag); } }

div CSS sliding door special effect_html/css_WEB-ITnose

首页

测试

无聊

傻蛋

首页

测试

无聊

傻蛋

Related articles