<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> sliding door general js</title> <style type=" Text/css "> <!--body{margin:0px; Padding:0px;font-size:12px;background: #eee; line-height:20px;} . bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc; background: #fff;} . T_rt{text-align:right;} 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;} . Preview{margin:10px;padding:10px;overflow:hidden;background: #eee;} . cont{padding:10px;} . Cls{clear:both;} . Hidden{display:none;} #sourse {border:1px dotted #ccc; width:600px;height:300px;margin:0px auto;} . textdiv{margin:10px 40px 10Px;text-align:center;} h2{margin:0px 10px;background: #ccc;p adding:5px;} . Example{margin:10px;background: #FFF; border:1px dotted #ccc;p adding:10px;} . scrolldoorframe{width:400px;margin:0px Auto;overflow:hidden;} . scrollul{width:400px;border-bottom:1px solid #CCC; overflow:hidden;height:35px;} . Scrollul Li{float:left;} . 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;} --> </style> <script type= "Text/javascript" >/* 13 Demon qq:181907667 msn:wl181907667@hotmail.com mailbox: Thir dteendevil@163.com */function Scrolldoor () {} Scrolldoor.prototype = {sd:function (menus,divs,openclass,closec Lass) {var _this = this; if (menus.length!= divs.length) {alert ("The number of menu layer and content layer is different!"); 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.GETELEMENTB Yid (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> </pead> <body> <div class= "Bodyer" > <p class= "t_rt" > Sliding door Package </p> <p> effect Preview </p> <div class= "Preview" > <d IV class= "Scrolldoorframe" > <ul class= "Scrollul" > <li class= "sd01" id= "m01" > Slip Moving doors </li> <li class= "sd02" id= "m02" > Sliding doors </li> <li class= "sd02" id= "M03" "> Sliding door </li> <li class=" sd02 "id=" m04 "> Sliding door </li> <li class=" SD02 "I d= "m05" > Sliding door </li> </ul> <div class= "bor03 cont" > <div ID = "C01" > First level content </div> <div id= "C02" class= "hidden" > Second floor content </div> <div id= "c03" class= "hidden" > Three-layer content </div> <div id= "C04" class= "hidden" > Fourth level Content </div> <div id= "c05" class= "hidden" > Fifth layer &L t;/div> </div> </div> </div> <div class= "Preview" > <div class= "Scrolldoorframe" > <ul class= "Scrollul" > <li class= "sd01" id= "M M01 "> Sliding door </li> <li class=" sd02 "id=" mm02 "> Sliding door </li> <li class=" sd0 2 "id=" mm03 "> Sliding door </li> <li class=" sd02 "id=" mm04 "> Sliding door </li> <li cl ass= "sd02" id= "mm05" > Sliding door </li> </ul> <div class= "bor03 cont" > <div id= "CC01" > First level content </div> <div id= "Cc02" class= "hidden" > Second-level content </div> <div id= "cc03" class= "hidden" > Third-tier content </div> <div id= "CC04" class= "hidden" > Fourth level Content </div> <div id= "cc05" class= "hidden" > Fifth level Content </div> </div> </div> </div> <div class= "Preview" > <div class= "Scrolldoorframe" > <ul class= "Scrollul" > <li class= "sd01" id = "MMM01" > Sliding door </li> <li class= "sd02" id= "mmm02" > Sliding door </li> <li class = "SD02" id= "mmm03" > Sliding door </li> <li class= "sd02" id= "mmm04" > Sliding door </li> &l T;li class= "sd02" id= "mmM05 "> Sliding door </li> </ul> <div class=" bor03 cont "> <div id=" c CC01 "> First layer content </div> <div id=" Ccc02 "class=" hidden "> Second-level content </div> <div id= "ccc03" class= "hidden" > The third layer content </div> <div id= "CCC04" class= "hidden" > Layer Fourth content </div> <div id= "ccc05" class= "hidden" > Layer Fifth </div> </div> </div> </div> </div> </bod Y> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Source:
Copy Code code as follows:
function Scrolldoor () {
}
Scrolldoor.prototype = {
Sd:function (Menus,divs,openclass,closeclass) {
var _this = this;
if (menus.length!= divs.length)
{
Alert ("The number of menu layers is not the same as the number of content layers!");
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;
}
}
How to use:
1. Introduce the above code into your page
Copy Code code as follows:
<script type= "Text/javascript" src= "Scrolldoor.js" ></script>
2. Add the following code before the "<body>" tab of the page:
Copy Code code as follows:
<script type= "Text/javascript" >
var Sdmodel = new Scrolldoor ();
SDMODEL.SD ([menu ID array],[display layer ID array], "Menu Trigger Class", "Menu off Class");
SDMODEL.SD ([menu ID array 2],[display layer ID array 2], "Menu Trigger Class", "Menu off Class");
SDMODEL.SD ([menu ID array 3],[display layer ID array 3], "Menu Trigger Class", "Menu off Class");
</script>
The parameters in the SD method are:
parameter one [menu ID array]: ID of the Sliding door menu
Parameter two [content ID array]: Show and hide the ID of the sliding content layer
Parameter three "menu Trigger class": The mouse passes through the sliding door menu class
Parameter four "menu off class": Mouse slide out of sliding door menu class
3. There are several sliding doors on the page to call the SD function several times, just change the parameters of the SD call, as shown in the above code.
