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實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動(dòng)的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動(dòng)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
javascript 限制輸入和粘貼(IE和火狐3.x下測(cè)試通過)
限制輸入和粘貼的js代碼
2008-11-11 
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個(gè)技術(shù)原型主要用于在 HTML5 平臺(tái)上展示 PDF 文檔，無需任何本地技術(shù)支持。非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-06-06 
js 截取或者替換字符串中的數(shù)字實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 截取或者替換字符串中的數(shù)字實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06 
自己封裝的javascript事件隊(duì)列函數(shù)版
這篇文章主要介紹了自己封裝的javascript事件隊(duì)列函數(shù)版,兼容了大部份瀏覽器,需要的朋友可以參考下
2014-06-06 
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)扁平化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12 
項(xiàng)目實(shí)踐之javascript技巧...
2007-12-12 
js生成1到100的隨機(jī)數(shù)最簡單的實(shí)現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機(jī)數(shù)最簡單的實(shí)現(xiàn)方法，有需要的朋友們可以學(xué)習(xí)下。
2020-02-02 
這里給大家分享的是本人近期學(xué)習(xí)與使用javascript之后總結(jié)出來的一些經(jīng)驗(yàn)和心得，雖然目前只有5點(diǎn)，但以后會(huì)慢慢更新，希望對(duì)大家能有所幫助。
2015-01-01