滑動門通用JS 滑動門封裝類 效果預覽 滑動門 滑動門 滑動門 滑動門 滑動門 第一層內容 第二層內容 第三層內容 第四層內容 第五層內容 滑動門 滑動門 滑動門 滑動門 滑動門 第一層內容 第二層內容 第三層內容 第四層內容 第五層內容 滑動門 滑動門 滑動門 滑動門 滑動門 第一層內容 第二層內容 第三層內容 第四層內容 第五層內容 源代碼 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> 使用方法 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調用的參數,如以上代碼上所展示. [Ctrl+A 全選 注:如需引入外部Js需刷新才能執行] JavaScript技術:js通用滑動門類,轉載需保留來源! 鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。