今天是:

注册会员|会员登陆|设为首页|加入收藏|广告服务|韩文翻译|RSS阅读|繁體中文

您现在的位置: 韩国设计资源网 >> 设计师学院 >> 网页设计 >> Javascript >> 教程正文

浮动菜单是如何作出来的mouse事件

  • 作者:未知 文章来源:收集整理 点击数: 更新时间:2006-6-2 22:27:39 用户收藏
这个问题由我来做一个最终解答吧。我以前也同样惊异于闪光地带的这个特效,苦恼于不知如何实现。我在经典提问,有一位网友热心解答了我的问题,但只是局限于如何加入和“闪光地带”同样的效果,而且并不完美,实际上这个脚本还可以实现许多效果,不知是zippy不知道还是没有用?可是当时看代码看的头晕眼花的我还是不知如何实现,幸运的是随着时间的推移,我终于找到了这个问题非常圆满的答案。请看:
这个效果是一个js特效,js文件名为coollayer.js也有叫overlib.js的,它可实现一种非常酷的浮动菜单效果,有5种风格:
风格1:没有标题栏
风格2:显示标题栏
风格3:点击显示标题栏
风格4:点击左侧显示标题栏
风格5:居中显示浮动窗口

在js文件中,绝大部分不必修改,你只要改一下显示的字体的大小即可。主要修改html文档页面,因为弹出的浮动窗口的显示内容全部由它控制。看看源代码,非常容易看得懂。比如我新建的网页:http://q3a.go.163.com

参数含义:(caption--标题)

onMouseOver 用以下函数控制:

Center(居中)
dcs(text)
dcc(text, caption)
Right
drs(text)
drc(text, caption)
Left
dls(text)
dlc(text, caption)

onMouseOut 用以下函数控制:

nd()

onClick 用以下函数控制:

scc(text, caption)
src(text, caption)
slc(text, caption)

其余注意的要点:

在<BODY></BODY>标签内必须有下面的2行:
<DIV ID="overDiv" STYLE="position:absolute; visibility:hide; z-index:1;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="overlib.js"></SCRIPT>

CSS用下面的一行控制,放在<head></head>之间。
<LINK REL="stylesheet" HREF="overlib.css" TYPE="text/css">
这些内容是摘自java2000站点的关于这个特效的说明文件,我已经做成了压缩包供大家下载。
地址是http://go.163.com/~dreamwar/resource/downloads/classical/coollink.zip同

[1] [2] [3] [4] [5] [6] [7] [8] 下一页