javascript 通用滑动门tab类
更新时间：2008年03月28日 23:03:37 作者：
滑动门JS并封装成类
[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调用的参数,如以上代码上所展示.
相关文章
这篇文章主要介绍了浅谈js 闭包引起的内存泄露问题的相关资料,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了javascript使用prototype完成单继承的方法及示例代码，有需要的小伙伴参考下2014-12-12
Javascript验证用户输入URL地址是否为空及格式是否正确
这篇文章主要介绍了Javascript验证用户输入URL地址是否为空及格式是否正确,很实用，需要的朋友可以参考下2014-10-10
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量,下面这篇文章主要给大家介绍了关于JavaScript对象解构用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了基于JavaScript实现简单扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。2010-02-02
createTextRange()的使用示例含文本框选中部分文字内容
这篇文章主要介绍了createTextRange()的使用示例,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JS与jQuery判断文本框还剩多少字符可以输入的方法,简单分析了js字符个数统计的方法,并给出了jQuery字符统计插件textlimit的相关使用方法示例,需要的朋友可以参考下2018-09-09
IIFE全拼Imdiately Invoked Function Expression,是一个在定义的时候就立即执行的JavaScript函数,这篇文章主要给大家介绍了关于Javascript立即执行函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
最新评论