|
效果預(yù)覽：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
源代碼：
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)你的頁面
<script type="text/javascript" src="scrollDoor.js"></script>
2.在頁面的"<body>"標(biāo)簽前加入以下代碼:
<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ù)組]：滑動門菜單的id
- 參數(shù)二 [內(nèi)容id數(shù)組]：顯示和隱藏滑動內(nèi)容層的id
- 參數(shù)三 "菜單觸發(fā)類"：鼠標(biāo)經(jīng)過滑動門菜單的類
- 參數(shù)四 "菜單關(guān)閉類"：鼠標(biāo)滑出滑動門菜單的類
3.頁面中有幾個滑動門就調(diào)用幾次sd函數(shù),只需改變sd調(diào)用的參數(shù),如以上代碼上所展示.
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2841023-1-2.html
本文鏈接：http://m.95time.cn/download/product/2008/5578.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
|
