滑动门通用代码类 - 窗口页面

您当前位置：网页特效代码 - 窗口页面

滑动门通用代码类

www.qpsh.com 更新日期：2008-7-29 人气指数 1237

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑动门通用JS</title> <style type="text/css">  </style> <script type="text/javascript"> /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容层数量不一样!"); return false; } for(var i = 0 ; i < menus.length ; i++) { _this.$(menus[i]).value = i; _this.$(menus[i]).onmouseover = function(){ for(var j = 0 ; j < menus.length ; 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.getElementById(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"); } </script> </head> <body> <div class="bodyer"> <h1 class="t_rt"> 滑动门封装类 </h1> <h2> 效果预览 </h2> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="m01">滑动门</li> <li class="sd02" id="m02">滑动门</li> <li class="sd02" id="m03">滑动门</li> <li class="sd02" id="m04">滑动门</li> <li class="sd02" id="m05">滑动门</li> </ul> <div class="bor03 cont"> <div id="c01"> 第一层内容 </div> <div id="c02" class="hidden"> 第二层内容 </div> <div id="c03" class="hidden"> 第三层内容 </div> <div id="c04" class="hidden"> 第四层内容 </div> <div id="c05" class="hidden"> 第五层内容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mm01">滑动门</li> <li class="sd02" id="mm02">滑动门</li> <li class="sd02" id="mm03">滑动门</li> <li class="sd02" id="mm04">滑动门</li> <li class="sd02" id="mm05">滑动门</li> </ul> <div class="bor03 cont"> <div id="cc01"> 第一层内容 </div> <div id="cc02" class="hidden"> 第二层内容 </div> <div id="cc03" class="hidden"> 第三层内容 </div> <div id="cc04" class="hidden"> 第四层内容 </div> <div id="cc05" class="hidden"> 第五层内容 </div> </div> </div> </div> <div class="preview"> <div class="scrolldoorFrame"> <ul class="scrollUl"> <li class="sd01" id="mmm01">滑动门</li> <li class="sd02" id="mmm02">滑动门</li> <li class="sd02" id="mmm03">滑动门</li> <li class="sd02" id="mmm04">滑动门</li> <li class="sd02" id="mmm05">滑动门</li> </ul> <div class="bor03 cont"> <div id="ccc01"> 第一层内容 </div> <div id="ccc02" class="hidden"> 第二层内容 </div> <div id="ccc03" class="hidden"> 第三层内容 </div> <div id="ccc04" class="hidden"> 第四层内容 </div> <div id="ccc05" class="hidden"> 第五层内容 </div> </div> </div> </div> </div> </body> </html>

【返回首页】【刷新本页】【返回顶部】【关闭本页】

本类热门

·DIV制作浮在页面的窗口	9/9/2007
·双击页面自动滚屏效果	9/4/2007
·神秘飘过来的AD窗口会自动关闭	12/25/2007
·进入慢慢变大的窗口	4/24/2008
·新浪博客页面右下角小跳窗效果	6/17/2008
·框架加载时的loading效果，兼容Firefox	8/1/2008
·变色的表格框	8/3/2008

本类最新

·变色的表格框	8/3/2008
·框架加载时的loading效果，兼容Firefox	8/1/2008
·滑动门通用代码类	7/29/2008
·漂亮的CSS园角效果	7/28/2008
·新浪博客页面右下角小跳窗效果	6/17/2008
·进入慢慢变大的窗口	4/24/2008
·神秘飘过来的AD窗口会自动关闭	12/25/2007

最具人气

·又一款FLASH图片切换效果代码	36022
·精致的翻动图片新闻代码	22797
·超级酷的网页导航菜单	18792
·常用网页漂浮广告代码	17991
·最新图片交替闪现效果代码	17768
·连续不间断横向滚动图片代码	14365
·美观实用的标签切换菜单	14231
·实用的标签切换菜单效果	12149

常用特效

·在线打印代码以及打印设置	2474
·常用网页漂浮广告代码	17991
·常用的对联广告带关闭功能	5183
·设置字体大中小代码	2408
·必须接受条款，否则灰色按钮	2435
·双击页面自动滚屏效果	2998
·常用的删除确认代码	2439
·常用的页面载入提示效果	3793

推荐特效

·可刷新的无限制级联菜单效果	3403
·不间断上下滚动公告代码	6665
·鼠标滑过自动点击链接	2267
·复制网页文章自动添加版权信息	1739
·[推荐]网页制作人员必看的24条技巧	5148
·独一无二的弹性图片展示特效	10746
·漂亮带缩略图的图片轮换代码	11603
·网页简体繁体互转特效代码	2904