|
|
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
源代碼： 復(fù)制代碼 代碼如下:
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜單層數(shù)量和內(nèi)容層數(shù)量不一樣!");
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.把以上代碼引進(jìn)你的頁面
復(fù)制代碼 代碼如下:
<script type="text/Javascript" src="scrollDoor.js"></script>
2.在頁面的"<body>"標(biāo)簽前加入以下代碼:
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
var SDmodel = new scrollDoor();
SDmodel.sd([菜單id數(shù)組],[顯示層id數(shù)組],"菜單觸發(fā)類","菜單關(guān)閉類");
SDmodel.sd([菜單id數(shù)組2],[顯示層id數(shù)組2],"菜單觸發(fā)類","菜單關(guān)閉類");
SDmodel.sd([菜單id數(shù)組3],[顯示層id數(shù)組3],"菜單觸發(fā)類","菜單關(guān)閉類");
</script>
其中sd方法中的參數(shù)為：
參數(shù)一 [菜單id數(shù)組]：滑動(dòng)門菜單的id
參數(shù)二 [內(nèi)容id數(shù)組]：顯示和隱藏滑動(dòng)內(nèi)容層的id
參數(shù)三 "菜單觸發(fā)類"：鼠標(biāo)經(jīng)過滑動(dòng)門菜單的類
參數(shù)四 "菜單關(guān)閉類"：鼠標(biāo)滑出滑動(dòng)門菜單的類
3.頁面中有幾個(gè)滑動(dòng)門就調(diào)用幾次sd函數(shù),只需改變sd調(diào)用的參數(shù),如以上代碼上所展示.
JavaScript技術(shù)：javascript 通用滑動(dòng)門tab類，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
