admin 管理员组文章数量: 1184232
2024年3月11日发(作者：arm视频解码)
维普资讯
同络天地 ＫＥＴＷＯＲＫ 主五ｒ ‘宣
编者按：新年伊始，《电脑知识与技水》杂志又面临新的挑战，如何让每十拦目焘
加吸引读者．颇让我们花费了诸多 思。网络专栏仍成平稳、求新的姿态面向广
大读者，力求符合大众化口胃，期期出精品；力求读者在嚼读文章的嗣时，不仅仅
获得的是乐趣，最重要的是能学刘崭新的知识
网页特效大放送
多级滑弓力某萆
ｗ￣ｓｐｅｙｉｎｇ
经常上阿的朋友可能都去过微软网
站，对它的导航下拉菜单羡慕不已，可是互
联网发展至今，遮已不是什么稀奇玩意儿
了，我们暂且不介绍这屉怎么做的，毕竟好
东东太多啦！下面介绍的是另
好尔东——多级滑动菜单！
・个所渭的
ｍｅｎｕｖ Ｉｆｉｌｔｅｒ：ｒｅｖｅａｒｒｆＨｎｓ（ｔｒａｎｓｉｔｉｏｔ￣＝
２３．ｄｕｒａｔｉｏｎ＝０．５）；ｐａｄｄｉｎｇ：２ｐｘｌ
＜／ｓｔｙｌｅ＞
ｎｏｎｎａｌ、ｕｐ、ｄｏｗｎ分别定义了鼠标离开、
移上、按下时显示在菜单项上的样式。
Ｍｃｎｕ￣表示鼠标移开菜单列的样式情况。上
面的代码可插在＜ｈｅａｄ＞与＜／ｂｅａｄ＞之
Ｉ。 Ｉ
目暖寓寓曩豳曩秘霉墨
．
，酶 ，峨韬 辑 《一
ｊ 栅‘ 叠曲盘－ Ｉ
ｊ 莓 ｉ面藉
｛
第二步．我们来看下面的ＪａｖａＳｃｒｉｐｔ的
代码。
ｆ｛ｆ鲢壁 蠖囊’ 曼 ｉ
其中打开网页时菜单列从测览器左下
角飞上去的效果是由函数ｂｏｄｙｌｏａｄ（）控制
的；控制鼠标拖动层的函数是ｍｏ￣ｅ（）；下面
从这个例子中我们可以学到一些有关
每段函数后面都有注释，解释了每段函数的
功能。
ｍｏｖｅｆ １ ｏｌ卜
ＣＳＳ和ＪａｙａｋＳｃｌｉｐｔ的知识，对Ｆ拉菜单的制
作原理和基础的理解有着很大帮助。这种
菜单的好处就是我们可以用鼠标任意地拖
动 闲话不说了，下面我们来一步一步学习
这个菜单是如何做出来的。
第步：定义ＣＳＳ样式表
首先我们根据需要定义菜单项和菜单
ｌｏａｄ＝ｂｏｄｙｌｏａｄ（）＞
＜ＳｏｒＬｐｔ＞
／／闪烁的表格边框
ｆｕｎｃｔｉｏｎ ｆｌａｓｈｉｔ（）
ｆ ｉｆ¨ｄｏｃｕｍｅｎｔ．ａｌ１）
ｒｅｔｕｒｌ￣；
列的ＣＳＳ层叠样式表
＜￣ｌｙｌｅ＞
ｉｆ（ｔｄｌ２３．ｓｔｙｌｅ ｂｏｒｄｃｒ（￣ｏｌｏｒ＝： ｂｌａｃｋ ）
ｔｄ１２３．ｓｔｙｌｅ．ｂｏｒｄｅｒＣｏｌｏｒ：＂＃９９９９９９ ：
ｅｌｓｅ
｝Ｈ，ｄｙ，ｔｄ，ａ｛ｆｏｎｔ—ｓｉｚｅ：９ｐｔ；ｃｏｌｏｒ：ｂｌａｃｋ；
ｔｅｘｔ—ｄｅ（：ｏｒａｔｉｏｎ：Ｆｌｏｎ￣￣】
．
ｎｏｒｍａｌ【ｐａｄｄｉｎｇ：２ｐｘ １
．
ｔｄ１２３．ｓｔｙｌｅ ｂｏｒｄｃｒＣｏｌｏｒ＝ ｂｌａｃｋ ｌ
ｕｐ ｆｐａｄｄｉｎｇ：１ ｐｘ；ｂｏｒｄｅｒ＂．＃９９９９９９ １ ｐ
Ｉ
ｓｅｔｌｎｔｅｒ＊＇ａｌ（ ｆｌａｓｈｉｔ（） ，５０ｏ）
ｓｏｌｉｄ；ｂａｃｋｇｒｏｕｎｄ：＃ｃｃｃ
／／渐人的效果，改变ａｌｐｈａ值
ｆｕｎｃｔｉｏｎ ｈｉｇｈ（ｉｍａｇｅ１
｛ｔｈｅｏｂｊｅｃｔ：ｉｍａｇｅ，ｈｉ曲ｌｉｇｌ１ｔｉｎｇ ｓｅｔ－
ｄｏｗｎ｛ｐａｄｄｉｎｇ：ｌｐｘ；ｂｏｒｄｅｒ：ｄｂｄｂｄｂ
１ｐｘ￣ｏｌｉｄ；ｂａｃｋｇｒｏｕｎｄ：ｄｂｄｂｄｂ １
维普资讯
＾ ｒ羲室
ｌｎｔｅ￣＇ａｌ（ ｈｉｇｈｌｉｇｈｔｉｔ（ｔｈｅｏｂｊｅｃｔ） ．１００）Ｊ
ｆｕｎｃｔｉｏｎ ｌｏｗ（ｉｍａｇｅ）
ＮＥＴＷＯＲＫ
＜／ｓｃｒｉｐｔ＞
＜／ｂｏｄｙ＞
网络天地
｛ｃｌｅａｒｌｎｔｅｒ￣ａｌ（ｈｉｇｈｌｉｇｈｔｉｎｇ），
ａｇｅ．ｆｉｌｔｅｒｓ ａｌｐｈａ．ｏｐａｃｉｔｙ＝５０Ｉ
ｆｕｎｃｔｉｏｎ ｈｉｇｈｌｉｇｈｔｉｔｆ（。ｌｌｌ２１
ｉａ－ｒ
第兰步：，我们具体地来｛ｌ一看在网页
中的操作过程。
在这里用ＤＩＶ标识来作多级滑动菜单
列，用ＴＡＢＬＥ来做菜单项。要注意一ｆ的
是．这里的主菜单其实是一个表格，只是在
【ｉｌ＇｛ｔ：ｕｒ２．ｆｉｌｔｅｒｓ．ａｌｐｈａ．ｏｐａｃｉｔｙ＜Ｉ ｏ０）
ｃｕｒ２．ｍｉｔｅｒｓ ａｌｐｈａ、ｏｐａｃｉｔｙ＋＝２０；
ｅｌｓｅ ｉｆ（ｗｉｎｄｏｗ ｈｉｇｈｌｉｇｈｒｉｎｇｊ
表格ＴＤ项中加人了诸如“，＇ｌａｓｓ＝ｎｏｒｍａｌ
０ｎＭ０ｕｓｅＤｏｗｎ：＂ｔｈｉｓ．ｅｌａ＊ｓＮａＩｌＩｅ＝ ｄｏｗｎ ” ’’
ｅｌｅａｒｌｎｔｅｒｖａｌ（ｈｉｇｈｌｉｇｈｌｉｎｇ）｝
／／拖动层的＿ｓ
ｖａｒ ＯＶｅｌ－＝ｆａｌｓｅ，ｄｏｗｎ＝ｆａＩｓｅ．ｄｉｖｌｅｆｔ，ｄｉ－
ｖｔｏｐ；
ｆｕｎＩ－ｔｉｏｎ／ＭＯＶｅ【１
这娄的语句来达到美化效果。同时为了让
子菜单项定位准确，我们把子菜单所在层都
放在＿ｒ主菜单所在的层内。下图是通过
ｄｒｅａｍｗｅａｖｅｒ体现出来的示意图，这样便能
够更容易理解它了
ｉｆ（ｄｏｗｎ）
ｐｌａｎｅ．ｓｔｙｌｅ．１ｅｆｔ＝ｅｖｅｎｔ ｃ：ｌｉｅｎｔＸ—ｄｉ—
ｖｌｅｆｔ；
ｔｏｐ；
ｐｌａｎｅ．ｓｔｙｌｅ．ｔｏｐ ｅｖｅｎｔ．ｃｌｉｅｎｔＹ—ｄｉｖ—
Ｊ
｝
／／滑动层
ｆｕｎｃｔｉｏｎ ｂｏｄｙｌｏａｄ（）
／／定义主菜单列
＜ｄｉｖ ｓｔｙｌｅ＝”ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；ｚ—ｉｎ—
ｄｅｘ：１；ｗｉｄｔｈ：１：ｈｅｉｓｈｔ：１；ｌｅｆｔ：Ｏ：ｔｏｐ：５００
ＩＤ ｐｌａｎｅ ｏｎｍｏｕｓｅｄｏｗｎ＝ ｄｏｗｎ ｔｒｕｅ；ｄｉ—
ｉｆｒｐｌａｎｅ．ｓｔｙｌｅ．ｐｉｘｅｌＴｏｐ！＝Ｏ１
ｖｌｅｆｔ ｅｖｅｎｔ ｃｌｉｅｎｔＸ—ｐａｒｓｅｌｎｔ
（ｐｌａｎｅ．ｓｔｙｌｅ．１ｅｆｔ）：ｄｉｖｔｏｐ＝ｅｖｅｎｔ．ｅｌｌｅｎｔＹ—
ｐｌａｎｅ．ｓｔｙｌｅ．ｐｉｘｅｌＴｏｐ一＝１０
ｐａｒｓｅｌｎｔ（ｐｌａｎｅ．ｓｔｙｌｅ．ｔｏｐ）
ｄｏｗｎ＝ｆａＩｓｅ ＞
ｏｎｍｏｕｓｅｕｐ＝
ｓｅｔＴｉｍｅｏｕｔ（ ｂｏｄｙｌｏａｄ（） ，１）
Ｊ
／／渐变显示层，
ｆｕｎｃｔｉｏｎ Ｓｈｏｗ（ｄｉｖｉｄ）
＜ｔａｂｌｅ ｉｄ＝＂ｔｄ １２３ ｃｅｌｌｓｐａｃｉｎｇ ２
ｗｉｄｔｈ＝１００ １３ｏｒｄｅｒ＝０ ｓｔｙｌｅ＝ ＢＯＲＤＥＲ：＃
９９９９９９ Ｉ ｐｘ ｓｏｌｉｄ； ｅｕｒｆｌｏｒ：
ｐａｄｄｉｎｇ＝
＜ｔ １）
ｈａｎｄ ｃｅｌｌ－
ｂｇｅｏｌｏｒ＝＂＃ｆ４ｆ４ｆ４
ｄｉｖｉｄ ｆｉｌｔｅｒｓ．ｒｅｖｅａｌＴｒａｎｓ．ａｐｐｌｙ（）；
ｄｉｖｉｄ．ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝ ＇ｖｉｓｉｂｌｅ ：
＜ｔｄ ｈｇｃｏｌｏｒ＝ ＃ｃｃｃｃｃｃ ｈｅｉｇｈｔ＝＂２０
ｓｔｙｌｅ＝ ＢＯＲＤＥＲ：＃９９９９９９ ｌ Ｄｘ ｓｏｌｉｄ；ｃｕｒ－
ＳＯｌ＇：丌１０ｖｅ，，）
ｄｉｖｉｄ．ｆｉｌｔｅｒｓ．ｒｅｖｅａｌＴｒａｎｓ．ｐｌａｙ（）；
ｊ
＜ｄｉｖ ａｌｉｇｎ：＂ｃｃｒｌｔｅｒ ＞多级滑动菜单
＜／ｄｉｖ＞
＜／ｔｄ＞
（／ｔｒ＞
＜ｔｒ＞
ｆｕｎｃｔｉｏｎ Ｈｉｄｅ（ｄｉｖｉｄ）
｛
ｄｉｖｉｄ．ｆｉｌｔｅｒｓ．ｒｅｖｅａｌＴｒａｎｓ．ａｐｐｌｙ（）；
ｄｉｖｉｄ．ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝ ｈｉｄｄｅｎ ：
ｄｉｖｉｄ．ｆｉｌｔｅｒｓ．ｒｅｖｅａｌＴｒａｎｓ．ｐｌａｙ（）；
｝
＜ｔｄ ｃｌ鹅ｓ：ｎｏｒｍａｌ ｏｎＭｏｕｓｅＤｏｗｎ
ｔｈｉｓ．ｃｌａｓｓＮ￣ｌ｛ｌｅ＝ ｄｏｗｎ ｏｎＭｏｕｓｅＯｖｅｒ＝
——
谴 扣≯嗣嚏＿ １９
维普资讯
网络天地
ｍｅｎｕ１
ＮＥＴＷＯＲＫ
ｃｕｒｓｏｒ：
ｆ４ｒ４ｆ４ ａｌｉｇｎ＝ ｒｉｇｈｔ ）
＜ｈ１）
ｌ１Ｈ‘ｌ
ｈａｎｄ ｅｅｌｌｐａｄｄｉｎｇ＝ ．（１”ｂｇｃｏｌｏｒ＝
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ ｕｐ ，ｈｉｇｈ（ｔｈｉｓ）， Ｓｈｏｗ
ｏｎＭｏｕｓｅＯｕｔ＝ ｔｈｉｓ．ｅｌａｓｓＮａｍｅ：
ｎｏｒｍａｌ ．１ｏｗ（ｔｈｉｓ），ｍｅｎｕ１．ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝
ｈｉｄｄｅｎ ｓｔｙｌｅ＝ ｆｉｌｔｅｒ：ａｌｐｈａ（ｏｐａｃ！ｔｙ＝５０）
ｏｎＭｏｕｓｅＵｐ ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ ｕｐ ＞
＜ｔｄ ｃｌａｓｓ ｎｏｒｍａｌ ｏｎＭｏｕｓｅＤｏｗｎ＝
ｔｈｉｓ ｃｌａｓｓＮａｍｅ＝ ｄｏｗｎ
０ｎＭｏｕｓｅＯｖｅｒ ＇ｈｉｓ．ｅｌａｓｓＮａｍｅ＝ ｕｐ ．ｔ
＜ｄｉｖ ａｌｉｇｎ＝ ｒｉｇｈｔ ＞有下级菜单＞＞
＜／ｄｊｖ）
ｈｉｇｈｆｔｈｉｓ１ ｏｎＭｏｕｓｅＯｕｔ＝ ｔｈｉｓ，ｃｌａｓｓＮａｍｅ＝
＜／ｔｄ＞
（／ｔｒ＞
＜ｔｒ＞
ｎｏｒｍａｌ ．１ｏｗ（ｔｈｉｓ） ｓｔｙｌｅ＝ ｆｉｌｔｅｒ： ａｌｐｈａ
ｏｐａｃｉｔｙ＝５０１ ｏｎＭｏｕｓｅＵｐ＝
ｔｈｉｓ ｃｌａｓｓＮａｍｅ＝ ｕｐ ＞
＜ｔｄ ｃｌａｓｓ ｎｏｒｍａｌ ｏｎＭ
ｔｈｊｓ ｅｌａｓｓＮａｍｅ ｄｏｗｎ
Ｄｏｗｎ＝
＜ｄｉｖ Ｍｉｇｎ：”ｃｅｎｔｅｒ ＞子菜单
＜／ｔｄ＞
＜／ｄｉｖ＞
ｏｎＭｏｕｓｅＯｖｅｒ＝ ｔｈｉｓ．ｅｌａｓｓＮａｍｅ ｕｐ ．
＜／ｔｒ＞
＜ｔｒ＞
ｈｉｇｈ（ｔｈｉｓ） Ｓｈｏｗ（ｍｅｎｕ２）”ｏｎＭｏｕｓｅＯｕｔ＝
ｈｉｔｓ ｃｌａ￣ｓｓＮａｍｅ＝ ｎｏｒｍａｌ
ｔｅｒ： ａｌｐｈａ ｒｏｐａｃｉｔｙ＝５０、
ｕｐ ）
，ｌｏｗ（ｔｈｉｓ），
ｓｔｙｌｅ＝ ＇ｉｌ—ｆ
＜ｔｄ ｃｌａｓｓ ｎｏｒｍａｌ ｏｎＭｏｕｓｅＤｏｗｎ＝
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ： ｄｏｗｎ
ｏｎＭｏｕｓｅＯｖｅｒ＝ ｔｈｉｓ．ｃｌａｓｓＮａｍｅ ｕｐ ．
ｍｅｎｕ２．ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝ ｈｉｄｄｅｎ
ｏｎＭｏｕｓｅＵｐ＝
ｔｈｉｓ ｅｌａｓｓＮａｍｅ
ｈｉｇｈ（ｔｈｉｓ１”ｏｎＭｏｕｓｅＯｕｔ＝ ＇ｔｈｉｓ．ｅｌａｓｓＮａｍｅ＝
＜ｄｉｖ ａｌｉｇｎ＝ ｒｉｇｈｔ ＞有下级菜单＞）
（／ｄｉｖ＞
＜／ｔｄ＞
（／ｔｒ＞
＜ｔｒ＞
ｎｏｒｍａｌ ．１ｏｗ《ｔｈｉｓ） ｓｔｙｌｅ＝ ＇ｉｆｌｔｅｒ： ａｌｐｈａ
ｒｏｐａｃｉｔｙ ５０） ｏｎＭｏｕａｅＵｐ＝
ｔｈｉｓ ｃｌａｓｓＮａｍｅ＝ ｕｐ ＞
＜ｄｉｖ ａｌｉｇｎ：ｃｅｎｔｅｒ＞子菜单＜／ｄｉｖ＞
＜／ｔｄ＞
＜／ｔｒ＞
＜ｔｒ＞
（【ｄ ｃｌａｓｓ＝ｎｏＦｎｌ￣ｌ ｏｎＭｏｕｓｅＤｏｗｎ＝
ｔｈｉｓ．㈣ｌａ ｓＮａｍｅ＝ ｄｏｗｎ ” ｏｎＭｏＨｓｅＯｖｅｔ
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ ｕｐ ，ｈｉｇｈ（ｔｈｉｓ） ｏｎＭｏｕｓｅ—
Ｏｕｔ＝ ｔｈｉｓ．ｅｌａｓｓＮａｍｅ＝ ｎｏｒｍａｌ ．１ｏｗ（ｔｈｉｓ）
ｓｔｙｌｅ＝ ｆｉｌｔｅｒ：ａｌｐｈａ ｒｏｐａｃｉｔｙ＝５０、 ｏｎＭｏｕｓｅ—
＜ｔｄ ｃｌａｓｓ＝ｎｏｒｍａｌ ｏｎＭｏｕｓｅＤｏ，ｗｎ＝
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ ｄｏｗｎ
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ ｕｐ ． ｏｎＭｏｕｓｅＯｖｅｒ
Ｕｐ＝ ｔｈｉｓ．ｅｌａｓｓＮａｍｅ＝ ｕｐ ＞
ｈｌｇｈ ｆ ｔｈｉｓ） ｏｎＭｏｕｓｅＯｕｔ＝ ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝
＜ｄｉｖ ａｌｉｇｎ＝ ＇ｉｒｇｈｔ ＞无下级菜单＞＞
＜／ｄｉｖ＞
（／ｔｄ＞
＜／ｔｒ＞
（／ｔａｔｄｅ＞
ｎｏｒｍａｌ ．１ｏｗ【ｔｈｉｓ） ｓｔｙｌｅ： ＇ｆｉｌｔｅｒ： Ｍｐｈａ
Ｉｏｐａｃｉｔｙ ５０、 ＇ｏｎＭｏｕｓｅＵｐ＝
ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ ｕｐ ＞
＜ｄｉｖ ａｌｉｇｎ＝ｃｅｎｔｅｒ＞子菜单
（／ｔｄ＞
＜／ｔｒ＞
＜／ｄｉｖ＞
／／定义第一个子菜单列
＜ｄｉｖ ｉｄ＝ ｒ１］ｅｎｕ１”ｓｔｙｌｅ＝ ｐｏｓｉｔｉｏｎ：ａｂ—
ｓｏｌｕｔｅ；ｔｏｐ：２４ｐｘ；ｌｅｆｔ：９６ｐｘ；ｚ—ｉｎｄｅｘ：１：ｖｉｓ—
ｉｈｉｌｉｔｙ：ｈｉｄｄｅｎ：ｗｉｄｔｈ：１０５
ｏｎＭｏｕｓｅＯｖｅｒ＝ｔｈｉｓ ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝
ｖｉｓｉｔ】ｌｅ
＜／ｔａｂｌｅ＞
／ｄｉｖ）
定义第二个子菜单方法与定义第一个
子菜单的方法完全相同，在此就不多说了
关于多级滑动菜单的问题就讲到这儿
了。由于本人水平有限，可能说得不太清楚，
清各位多包涵。各位可以参考上述实例，编
ｏｎＭｏｕｓｅＯｕｔ＝ｔｈｉｓ．ｓｔｙｌｅ．ｖｉｓｉｂｉｌｉｔｙ＝
ｈｉｄｄｅｎ ｃｌａｓｓ ｔｎｅｎｕｖ
＜ｔａｂｌｅ ｃｅｌｌｓｐａｃｉｎｇ＝２ ｗｉｄｔｈ＝１００ ｌｍｒ—
ｄｅｒ＝０ ｓｔｙｌｅ＝ Ｂ０ＲＤＥＲ：＃９９９９９９ １ ｐｘ ｓｏｌｉｄ；
制自己的菜单了，希望这个例子能让你的主
页更加吸引人！ 释
２０
版权声明：本文标题：网页特效大放送—多级滑动菜单 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710153660a559871.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论