|
|
[Ctrl+A 全選 注:如需引入外部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;
}
}
使用方法：
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技術：javascript 通用滑動門tab類，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
