div+CSS滑动门特效_html/css_WEB-ITnose

滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“

滑动门 ”、“ 第五层内容 ”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。

滑动门

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也行。

div+CSS滑动门特效_html/css_WEB-ITnose

首页

测试

无聊

傻蛋

首页

测试

无聊

傻蛋

관련 기사