javascript 通用滑動(dòng)門tab類
更新時(shí)間：2008年03月28日 23:03:37 作者：
滑動(dòng)門JS并封裝成類
[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ù),如以上代碼上所展示.
您可能感興趣的文章:
- 簡單通用的JS滑動(dòng)門代碼
- js通用滑動(dòng)門類
- JS+CSS實(shí)現(xiàn)簡單滑動(dòng)門(滑動(dòng)菜單)效果
- JS+CSS實(shí)現(xiàn)簡易的滑動(dòng)門效果代碼
- 一個(gè)js實(shí)現(xiàn)的所謂的滑動(dòng)門
- JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁滑動(dòng)門菜單效果代碼
- JS仿淘寶實(shí)現(xiàn)的簡單滑動(dòng)門效果代碼
- JS實(shí)現(xiàn)滑動(dòng)門效果的方法詳解
- JS實(shí)現(xiàn)的簡潔縱向滑動(dòng)菜單(滑動(dòng)門)效果
- JavaScript實(shí)現(xiàn)滑動(dòng)門效果
相關(guān)文章
這篇文章主要介紹了淺談js 閉包引起的內(nèi)存泄露問題的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細(xì)介紹了js仿新浪微博消息發(fā)布功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了javascript使用prototype完成單繼承的方法及示例代碼，有需要的小伙伴參考下2014-12-12
Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確
這篇文章主要介紹了Javascript驗(yàn)證用戶輸入U(xiǎn)RL地址是否為空及格式是否正確,很實(shí)用，需要的朋友可以參考下2014-10-10
JavaScript對象解構(gòu)的用法實(shí)例解析
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對象解構(gòu)用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
基于JavaScript實(shí)現(xiàn)簡單掃雷游戲
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡單掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
js 鍵盤記錄實(shí)現(xiàn)(兼容FireFox和IE)
用js實(shí)現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應(yīng)onkeydown、onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時(shí)候的keyup。2010-02-02
createTextRange()的使用示例含文本框選中部分文字內(nèi)容
這篇文章主要介紹了createTextRange()的使用示例,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JS與jQuery判斷文本框還剩多少字符可以輸入的方法,簡單分析了js字符個(gè)數(shù)統(tǒng)計(jì)的方法,并給出了jQuery字符統(tǒng)計(jì)插件textlimit的相關(guān)使用方法示例,需要的朋友可以參考下2018-09-09
Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04