当前位置: 首页 > 图文教程 > 网络编程 > JSP > 浮动菜单是如何作出来的mouse事件

JSP
Java 创建cookie和删除cookie
jsp 从web.xml读取连接数据库的参数
jsp 不支持EL表达式,解决办法
jsp 获取客户端的浏览器和操作系统信息
struts2 session 解读
struts2 spring整合fieldError问题
jsp 生成验证码代码
搭建java WEB开发环境和应用
JSP 自定义标签
Java 区分文本中的中英文字符函数
通用JSP页面 jsp入门级文章
jsp struts1 标签实例详解
一个jdbc 测试程序代码
SSH整合中 hibernate托管给Spring得到SessionFactory
jsp SmartUpload 实现上传功能代码
jsp Unsupported encoding: gb2312 错误原因
java Struts2 在拦截器里的跳转问题
jsp 对request.getSession(false)的理解(附程序员常疏忽的一个漏洞)
Java 项目生成静态页面的代码
jdk与jre的区别 很形象,很清晰,通俗易懂

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-02   浏览: 166 ::
收藏到网摘: n/a

这个问题由我来做一个最终解答吧。我以前也同样惊异于闪光地带的这个特效,苦恼于不知如何实现。我在经典提问,有一位网友热心解答了我的问题,但只是局限于如何加入和“闪光地带”同样的效果,而且并不完美,实际上这个脚本还可以实现许多效果,不知是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/reso ... ssical/coollink.zip同时欢迎大家来我的新网站:“雷神战梦”(http://q3a.go.163.com)做客,比闪光地带的那个特效还酷哦!!

附java2000的网址:http://java2000.126.com

附coollayer.js(overlib.js)源文件:

////////////////////////////////////////////////////////////////////////////////////

// overLIB 2.22 -- Please leave this notice.

//

// By Erik Bosrup ([email protected]) Last modified 1999-03-31

// Portions by Dan Steinman, Landon Bradshaw and Gnowknayme.

////////////////////////////////////////////////////////////////////////////////////

//请不要随便修改

////////////////////////////////////////////////////////////////////////////////////

// CONFIGURATION

////////////////////////////////////////////////////////////////////////////////////

// 主背景色(大区域)

// 通常使用明快的颜色(浅黄色等...)

if (typeof fcolor == 'undefined') { var fcolor = "#CCCCFF";}

// Border的颜色和标题栏的颜色;

// 通常的颜色深(褐色,黑色等。)

if (typeof backcolor == 'undefined') { var backcolor = "#333399";}

// 文字的颜色

// 通常是比较深的颜色;

if (typeof textcolor == 'undefined') { var textcolor = "#000000";}

// 标题的颜色

// 通常是明快的颜色;

if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}

// "Close"的颜色

// 通常是明快的颜色;

if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}

// 弹出的窗口的宽度;

// 100-300 pixels 合适

if (typeof width == 'undefined') { var width = "200";}

// 边缘的宽度,象素。

// 1-3 pixels 合适

if (typeof border == 'undefined') { var border = "1";}

// 弹出窗口位于鼠标左侧或者右侧的距离,象素。

// 3-12合适

if (typeof offsetx == 'undefined') { var offsetx = 10;}

// 弹出窗口位于鼠标下方的距离;

// 3-12 合适

if (typeof offsety == 'undefined') { var offsety