浮动菜单是如何作出来的mouse事件
|
这个效果是一个js特效，js文件名为coollayer.js也有叫http://edu.cnzz.cn/NewsInfo/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="http://edu.cnzz.cn/NewsInfo/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同时欢迎大家来我的新网站：“雷神战梦”(http://q3a.go.163.com)做客，比闪光地带的那个特效还酷哦！！ 附java2000的网址：http://java2000.126.com 附coollayer.js(http://edu.cnzz.cn/NewsInfo/overlib.js)源文件： //////////////////////////////////////////////////////////////////////////////////// // overLIB 2.22 -- Please leave this notice. // // By Erik Bosrup (erik@bosrup.com) 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 = 10;} //////////////////////////////////////////////////////////////////////////////////// // 设置结束 //////////////////////////////////////////////////////////////////////////////////// ns4 = (document.layers)? true:false ie4 = (document.all)? true:false // Microsoft Stupidity Check. if (ie4) { if (navigator.userAgent.indexOf("MSIE 5")>0) { ie5 = true; } else { ie5 = false; } } else { ie5 = false; } var x = 0; var y = 0; var snow = 0; var sw = 0; var cnt = 0; var dir = 1; var tr = 1; if ( (ns4) || (ie4) ) { if (ns4) over = document.overDiv if (ie4) over = overDiv.style document.onmousemove = mouseMove if (ns4) document.captureEvents(Event.MOUSEMOVE) } // 以下是页面中使用的公共函数； // Simple popup right function drs(text) { dts(1,text); } // Caption popup right function drc(text, title) { dtc(1,text,title); } // Sticky caption right function src(text,title) { stc(1,text,title); } // Simple popup left function dls(text) { dts(0,text); } // Caption popup left function dlc(text, title) { dtc(0,text,title); } // Sticky caption left function slc(text,title) { stc(0,text,title); } // Simple popup center function dcs(text) { dts(2,text); } // Caption popup center function dcc(text, title) { dtc(2,text,title); } // Sticky caption center function scc(text,title) { stc(2,text,title); } // Clears popups if appropriate function nd() { if ( cnt >= 1 ) { sw = 0 }; if ( (ns4) || (ie4) ) { if ( sw == 0 ) { snow = 0; hideObject(over); } else { cnt++; } } } // 非公共函数，被其它的函数调用； // Simple popup function dts(d,text) { txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=""+backcolor+""><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=""+fcolor+""><TR><TD><FONT FACE="宋体" COLOR=""+textcolor+"">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>" layerWrite(txt); dir = d; disp(); } // Caption popup function dtc(d,text, title) { txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=""+backcolor+""><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID="PTT"><FONT COLOR=""+capcolor+"">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=""+fcolor+""><TR><TD><SPAN ID="PST"><FONT COLOR=""+textcolor+"">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>" layerWrite(txt); dir = d; disp(); } // Sticky function stc(d,text, title) { sw = 1; cnt = 0; 12下一页
源代码网供稿. |
