<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示隐藏层与弹出菜单JS</title>
<!--在页面里合法的地方加入下面的一段注释可以在本地用IE打开时避免讨厌的黄色警告条-->
<!-- saved from url=(0014)about:internet -->
<!--下面的注释具有同样的效果-->
<!-- saved from url=(0014)about:intranet -->
<!--但是不好的地方是,加了这个,XHR就不能读取本地文件了*0*-->
<script type="text/javascript" src="myLayersShow.js"></script>
<script type="text/javascript">
function example() { //这是一个示例,我并没运行它,因为页面中并没有ID为a,b,c,d,e,f的元素
/*这里用with语句来使代码变得更简单,当然也可以用另一种方法
*var g = myLayersShow; //为myLayersShow创建一个简单的引用
*var myG = new g.LayersGroup(); //依此类推
*/
with(myLayersShow) { //注意,这里在使用myLayersShow对象,那么就应该在这运行之前确保myLayersShow.js已经加载了,否则会出现"myLayersShow"不是对象之类的错误
var myG = new LayersGroup(); //创建一个对象,这个对象包含你要设置的按钮和层
myG.addBL(["a","b","c"],["d","e","f"]); //现在就将那些按钮和内容层一一对应按序添加进这个对象吧,它们的ID无须什么规则
/*这里添加的字符串形式的ID,完全可以用另一种方式添加
*var buttons = document.getElementById("buttons"); //这里的buttons是一个包含一组按钮的对象,每个按钮都是它的子元素
*var layers = document.getElementById("layers"); //这里的layers是一个包含一组内容层的对象,它的子元素(子元素不包括孙子元素^-^)都半将被设置成内容层,并按在代码中的顺序,和上面的按钮一一绑定
*myG.addBL(buttons.childNodes,layers.childNodes);//childNodes是该对象的所有子元素组成的伪数组,这样,它们就被一一添加进去了
*/
myG.event = "mouseout"; //设置这一组的触发事件,就是当什么时候应该显示该层而隐藏其它层,当设成mouseout时,这组就变成了弹出式菜单(弹出菜单当鼠标放上去时显示,离开时隐藏,不能自定义),因为不可能在mouseout时显示该层,所以我作了这样的设置
myG.eventClass= "mixedClass"; //比如弹出菜单,当鼠标放上去时,这个按钮会被添加一个类mixedClass,移出时,又会被去除
myG.shapeTrans = true; //这组需要形状变化特效
myG.opacityTrans =true; //这组需要透明渐变特效
myG.needPlayer = 4000; //这组需要循环播放,(如图片轮播器),这里的4000是延迟时间,只将其设为true将采用默认速度
myG.format(); //一定要在所有都准备好,都设置好,最后再执行这一组的format方法(这里的format(格式化)并不会将元素删除啊^0^)
/*你完全可以再创建多个组(无数个)
*var myG1 = new LayersGroup();
*然后再添加元素,设置,最后format
*再创建.........................
*Do you know?
*If you know {
* myLayersShow will be garbage!
*}
*/
}
/*
*内置方法:shapeTrans,opacityTrans,addEvent,stopEvent,newXHR,rollClass,setOpacity我也不详说了,我将它们的参数都设置的比较有意义,一看便能明白了
*另外,我想我说了也是白说,如果你能够清楚上面的代码如何工作的,估计你也不需要我的JS库了,如果你一点不了解,那就什么都甭说了吧..............
*/
}
</script>
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">@import url("global.css");</style>
<style type="text/css">
#temp,#temp2 {
width:390px;
height:auto;
color:white;
background:blue;
border:1px solid orange;
float:left;
clear:left;
}
#temp2 {
clear:both;
float:right;
}
</style>
</head>
<body>
<h1>显示隐藏层与弹出菜单JavaScript代码</h1>
<ul id="navbuttonsgroup" class="event_mouseout shapeTrans_true opacityTrans_true eventClass_popClass">
<li>Home</li>
<li>AjaxLife</li>
<li>Let's Linux</li>
<li>Sources</li>
<li>About Me</li>
</ul>
<ul id="navlayersgroup">
<li class="example1"><strong>示例1</strong><strong>示例1</strong><strong>示例1</strong></li>
<li class="example2"><strong>示例2</strong><strong>示例2</strong><strong>示例2</strong></li>
<li class="example3"><strong>其实</strong><strong>很糟糕</strong><strong>问题不少</strong></li>
<li class="example4"><strong>糟糕!</strong><strong>示例4</strong><strong>示例4</strong></li>
<li class="example5"><strong>糟糕的示例</strong><strong>示例5</strong><strong>示例5</strong></li>
</ul>
<div id="dir">
<dl>
<dt id="a" class="eventClass_eventClass shapeTrans_true opacityTrans_true">目录一</dt>
<dd id="alayersbad">内容一</dd>
</dl>
<dl>
<dt id="b">目录二</dt>
<dd id="blayersbad">内容二</dd>
</dl>
<dl>
<dt id="c">目录三</dt>
<dd id="clayersbad">内容三</dd>
</dl>
<dl>
<dt id="d">目录四</dt>
<dd id="dlayersbad">内容四</dd>
</dl>
</div>
<ol id="aaabuttonsgroup" class="event_mouseover eventClass_eventClass opacityTrans_true needPlayer_2500">
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
</ol>
<ul id="aaalayersgroup">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
</ul>
<hr />
<dl id="des">
<dt>JS库文件元数据</dt>
<dd>名 称 : myLayersShow</dd>
<dd>命名空间 : myLayersShow(我不知道这能不能叫做命名空间-_-,--就冒允下高手吧)</dd>
<dd>功 能 : 实现网页上常见的内容切换,弹出菜单等功能</dd>
<dd>性 质 : JavaScript基础入门课结束作品</dd>
<dd>兼容列表 : IE 6.0 ; 火狐 3.0 ; Google Chrome ; Opera 朱雀.中国版</dd>
</dl>
<hr />
<p>
终于将这个JS写好了(实际上还有些功能没完成---本来还准备加入一点XHR,水平问题,没完成呢就急着拿出来显摆了!^O^).不过这个较上个还是有点进步了,上次做的那个现在看了都觉得有点弱智了,根本不能用,太垃圾!至于这个JS,也是写写就觉得不行,所以没写完,觉得还得再看看书,学习学习才行!但这也不是说这是个次品啊,至少还能用啊!
</p>
<p>
废话少说,还是说说用法吧.基本还是和上个一样,收集元素是采用了ID,但使用了更易用的模型.ID只要建立这样的映射就行了:aaabuttonsgroup------>aaalayersgroup<br />mybuttonsgroup------->mylayersgroup;看了名字就应该知道什么意思了----只要实现组的对应就行了,而不要每个都设ID;范例如下:
<br /><ul id="examplebuttonsgroup"><li>按钮1</li><li>按钮2</li><li>按钮3</li></ul>
<br /><ul id="examplelayersgroup"><li>层1</li><li>层2</li><li>层3</li></ul><br />
即,ID为examplebuttonsgroup的元素下面的子元素(这里是LI,不包括孙子元素^_^)将被当做按钮(我把点击的那些元素称为按钮,而显示内容的称为层),而id="examplelayersgroup"元素中的子元素将会被显示和隐藏,它们一一对应
它们有共同的标识符"example",在脚本中将被用做组的名称(我把它们分到了不同的组),所以ID的命名规则应为这样--------按钮 : 标识符+buttonsgroup;内容层 : 标识符+layersgroup;不同的组标识符不能相同.至于原来的一一映射的模型(一个按钮对应一个内容层,ID映射是这样的------>按钮 : 任意ID ;内容层 : 按钮ID+layer+组名称;仍然是同一个组采用同一个名称,名称为任意可在ID中使用的字符)在这个JS中也提供了支持,看看这个HTML文件的源代码就知道了.还有就是参数问题了.<br />
</p>
<p>
参数有三个属性可
显示隐藏层与弹出菜单JS
5星 · 超过95%的资源 需积分: 9 17 浏览量
2009-10-11
17:17:28
上传
评论
收藏 12KB RAR 举报 
JS.rar （3个子文件） 
显示隐藏层与弹出菜单JS 
myLayersShow.js 14KB index.htm 17KB global.css 3KB资源评论
yangcongds2014-02-26效果还可以的，可以试试
tu4519533372014-04-16可以的，适合简单了解下。
wang527514926
- 粉丝: 50
- 资源: 59
