JavaScript
搜索
分类

javascript 通用滑动门tab类

时间：2023-08-05 09:42:25　

<!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>



源代码：



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; 
} 
} 


使用方法：

1.把以上代码引进你的页面 



<script type="text/javascript" src="scrollDoor.js"></script> 


2.在页面的"<body>"标签前加入以下代码:


<script type="text/javascript"> 
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调用的参数,如以上代码上所展示.

标签：javascript,通用滑动门,tab
0
投稿

猜你喜欢

  • Python Pandas多种添加行列数据方法总结

    2023-10-19 17:17:58

  • Tensorflow 2.4加载处理图片的三种方式详解

    2023-12-07 05:28:26

  • 已解决卸载pip重新安装的方法

    2023-09-27 22:08:02

  • vscode通过Remote SSH远程连接及离线配置的方法

    2022-01-09 00:31:08

  • Pytorch模型的保存/复用/迁移实现代码

    2023-12-12 10:37:43

  • SQLserver查询数据类型为ntext是空或NULL值的方法

    2024-01-24 18:40:52

  • 浅析C# web访问mysql数据库-整理归纳总结

    2024-01-12 17:07:42

  • Python实现简单的代理服务器

    2023-03-28 15:13:50

  • 通过淘宝数据爬虫学习python scrapy requests与response对象

    2021-11-07 05:46:39

  • window环境配置Mysql 5.7.21 windowx64.zip免安装版教程详解

    2024-01-24 01:19:00

  • 如何修改被表单引用的ASP页面？

    2010-06-10 18:32:00

  • python缩进区别分析

    2022-05-18 00:37:50

  • PHP实现断点续传乱序合并文件的方法

    2023-06-20 02:35:21

  • Perl与JS的对比分析(数组、哈希)

    2022-08-31 05:45:20

  • css3元素简单的闪烁效果实现(html5 jquery)

    2024-04-23 09:20:49

  • Go slice切片使用示例详解

    2023-07-09 12:07:02

  • PHP获取当前相对于域名目录的方法

    2023-08-19 18:47:31

  • Python中使用wxPython开发的一个简易笔记本程序实例

    2021-09-07 22:06:22

  • 长期使用中型Access数据库的一点经验

    2007-12-21 13:23:00

  • PHP的Socket网络编程入门指引

    2023-11-18 15:46:12
    • asp之家 网络编程 m.aspxhome.com