站长资源 网络编程

js通用滑动门类

整理:jimmy2026/8/6浏览2次

简介滑动门通用JS 滑动门封装类效果预览滑动门滑动门

<!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>  </head> <body>      <h1 class="t_rt">         滑动门封装类     </h1>          <h2>         效果预览     </h2>                                <ul class="scrollUl">                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>             </ul>                                                   第一层内容                                                       第二层内容                                                       第三层内容                                                       第四层内容                                                       第五层内容                                                                            <ul class="scrollUl">                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>             </ul>                                                   第一层内容                                                       第二层内容                                                       第三层内容                                                       第四层内容                                                       第五层内容                                                                            <ul class="scrollUl">                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>                 <li>滑动门</li>             </ul>                                                   第一层内容                                                       第二层内容                                                       第三层内容                                                       第四层内容                                                       第五层内容                                                      <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; } }         <"preview">         1.把以上代码引进你的页面 &lt;script type="text/javascript" src="/UploadFiles/2021-04-02/scrollDoor.js"> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：js动画效果打开层关闭层

下一篇：js实现双击单元格变成文本输入框效果代码

站长资源 网络编程

js通用滑动门类

最新资源

一句话新闻

标签云