<textarea id="runcode75243"></textarea> Xmlns = "http://www.w3.org/1999/xhtml">
Sliding Door Encapsulation
Effect Preview
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
Layer 1 content Layer 2 content Layer 3 content Layer 4 content layer 5 content
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
Layer 1 content Layer 2 content Layer 3 content Layer 4 content layer 5 content
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
- Sliding Door
Layer 1 content Layer 2 content Layer 3 content Layer 4 content layer 5 content
Source code
<textarea id="sourse"><Br/> function scrolldoor () {<br/>}< br/> scrolldoor. prototype = {<br/> SD: function (menus, Divs, openclass, closeclass) {<br/> VaR _ this = This; <br/> If (menus. length! = Divs. Length) <br/>{< br/> alert ("the number of menu layers is different from the number of content layers! "); <Br/> return false; <br/>}< br/> for (VAR I = 0; I <br/></textarea> Usage
1. Set the above Code Introduce your page <SCRIPT type = "text/JavaScript" src = "scrolldoor. js"> </SCRIPT>
2. Add the following code before the "<body>" tag on the page:
<SCRIPT type = "text/JavaScript">
VaR sdmodel = new scrolldoor ();
Sdmodel. SD ([menu ID array], [display layer ID array], "menu trigger class", "menu close class ");
Sdmodel. SD ([menu ID array 2], [display layer ID array 2], "menu trigger class", "menu close class ");
Sdmodel. SD ([menu ID array 3], [display layer ID array 3], "menu trigger class", "menu close class ");
</SCRIPT>
The parameters in the SD method are:
Parameter 1 [menu ID array]: the ID of the sliding menu
Parameter 2 [Content ID array]: Display and hide the ID of the sliding content Layer
Parameter 3 "menu trigger class": class of the menu with the mouse sliding door
Parameter 4 "menu closure class": class for sliding menu with the mouse out
3. There are several sliding doors on the page to call the SD function several times. You only need to change the parameters of the SD call, as shown in the code above.