js通用滑动门类_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:04

js通用滑动门类_javascript技巧

js通用滑动门类_javascript技巧: 滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openCl

推荐度：

点击下载本文 文档为doc格式

导读js通用滑动门类_javascript技巧: 滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openCl

<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> 
 
/* 
十三妖 
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> 
 
 <h1 class="t_rt"> 
 滑动门封装类 
 </h2> 
 
 <h2> 
 效果预览 
 </h2> 
 
 
 
 
 <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> 
 
 
 
 第一层内容 
 
 
 第二层内容 
 
 
 第三层内容 
 
 
 第四层内容 
 
 
 第五层内容 
 
 
 
 
 
 
 
 
 <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> 
 
 
 
 第一层内容 
 
 
 第二层内容 
 
 
 第三层内容 
 
 
 第四层内容 
 
 
 第五层内容 
 
 
 
 
 
 
 
 
 <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> 
 
 
 
 第一层内容 
 
 
 第二层内容 
 
 
 第三层内容 
 
 
 第四层内容 
 
 
 第五层内容 
 
 
 
 
 
 <h2> 
 源代码 
 </h2> 
 
 
 <textarea id="sourse"> 
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; 
} 
} 
 </textarea> 
 
 
 <h2> 
 使用方法 
 </h2> 
 
 
 1.把以上代码引进你的页面 </ script>
 
 2.在页面的"<body>"标签前加入以下代码:
 
 
 
 
 var SDmodel = new scrollDoor(); 
 
 SDmodel.sd([菜单id数组],[显示层id数组],"菜单触发类","菜单关闭类");
 
 SDmodel.sd([菜单id数组2],[显示层id数组2],"菜单触发类","菜单关闭类");
 
 SDmodel.sd([菜单id数组3],[显示层id数组3],"菜单触发类","菜单关闭类");
 
 </ script> 
 
 其中sd方法中的参数为:
 
 参数一 [菜单id数组]:滑动门菜单的id
 
 参数二 [内容id数组]:显示和隐藏滑动内容层的id
 
 参数三 "菜单触发类":鼠标经过滑动门菜单的类
 
 参数四 "菜单关闭类":鼠标滑出滑动门菜单的类
 
 3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数,如以上代码上所展示. 
 
 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js通用滑动门类_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： js javascript 滑动门

热门焦点

js通用滑动门类_javascript技巧

js通用滑动门类_javascript技巧

js通用滑动门类_javascript技巧

最新推荐

猜你喜欢

热门推荐