本文实例讲述了overlib用法。分享给大家供大家参考，具体如下：
overLIB是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。
它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此，它还提供了非常简单的扩展功能，来足客户的不同需求。
overLIB使用非常的简单。
一、在<head></head>标签内添加：
<scripttype="text/javascript"src="overlib.js"><!--overLIB(c)ErikBosrup--></script>
二、在<body></body>标签内添加：<divid="overDiv"style="position:absolute;visibility:hidden;z-index:1000;"></div>
4.10以上的版本可省略此步
三、生成两种不同款式(popup与sticky)的弹出页面
<ahref="javascript:void(0);"onmouseover="returnoverlib('这是一个popup.');"onmouseout="returnnd();">popup示例</a>
<ahref="javascript:void(0);"onmouseover="returnoverlib('这是一个sticky',STICKY,MOUSEOFF);"onmouseout="returnnd();">stick示例</a>
四、命令与参数
popup
AttributeName
Type
Required
Default
Description
text
string
Yes
n/a
thetext/htmltodisplayinthepopupwindow
trigger
string
No
onMouseOver
Whatisusedtotriggerthepopupwindow.CanbeoneofonMouseOveroronClick
sticky
boolean
No
false
Makesthepopupstickarounduntilclosed
caption
string
No
n/a
setsthecaptiontotitle
fgcolor
string
No
n/a
coloroftheinsideofthepopupbox
bgcolor
string
No
n/a
coloroftheborderofthepopupbox
textcolor
string
No
n/a
setsthecolorofthetextinsidethebox
capcolor
string
No
n/a
setscolorofthebox'scaption
closecolor
string
No
n/a
setsthecoloroftheclosetext
textfont
string
No
n/a
setsthefonttobeusedbythemaintext
captionfont
string
No
n/a
setsthefontofthecaption
closefont
string
No
n/a
setsthefontforthe"Close"text
textsize
string
No
n/a
setsthesizeofthemaintext'sfont
captionsize
string
No
n/a
setsthesizeofthecaption'sfont
closesize
string
No
n/a
setsthesizeofthe"Close"text'sfont
width
integer
No
n/a
setsthewidthofthebox
height
integer
No
n/a
setstheheightofthebox
left
boolean
No
false
makesthepopupsgototheleftofthemouse
right
boolean
No
false
makesthepopupsgototherightofthemouse
center
boolean
No
false
makesthepopupsgotothecenterofthemouse
above
boolean
No
false
makesthepopupsgoabovethemouse.NOTE:onlypossiblewhenheighthasbeenset
below
boolean
No
false
makesthepopupsgobelowthemouse
border
integer
No
n/a
makestheborderofthepopupsthickerorthinner
offsetx
integer
No
n/a
howfarawayfromthepointerthepopupwillshowup,horizontally
offsety
integer
No
n/a
howfarawayfromthepointerthepopupwillshowup,vertically
fgbackground
urltoimage
No
n/a
definesapicturetouseinsteadofcolorfortheinsideofthepopup.
bgbackground
urltoimage
No
n/a
definesapicturetouseinsteadofcolorfortheborderofthepopup.NOTE:Youwillwanttosetbgcolorto""orthecolorwillshowaswell.NOTE:WhenhavingaCloselink,Netscapewillre-renderthetablecells,makingthingslookincorrect
closetext
string
No
n/a
setsthe"Close"texttosomethingelse
noclose
boolean
No
n/a
doesnotdisplaythe"Close"textonstickieswithacaption
status
string
No
n/a
setsthetextinthebrowsersstatusbar
autostatus
boolean
No
n/a
setsthestatusbar'stexttothepopup'stext.NOTE:overridesstatussetting
autostatuscap
string
No
n/a
setsthestatusbar'stexttothecaption'stext.NOTE:overridesstatusandautostatussettings
inarray
integer
No
n/a
tellsoverLibtoreadtextfromthisindexintheol_textarray,locatedinoverlib.js.Thisparametercanbeusedinsteadoftext
caparray
integer
No
n/a
tellsoverLibtoreadthecaptionfromthisindexintheol_capsarray
capicon
url
No
n/a
displaystheimagegivenbeforethepopupcaption
snapx
integer
No
n/a
snapsthepopuptoanevenpositioninahorizontalgrid
snapy
integer
No
n/a
snapsthepopuptoanevenpositioninaverticalgrid
fixx
integer
No
n/a
locksthepopupshorizontalpositionNote:overridesallotherhorizontalplacement
fixy
integer
No
n/a
locksthepopupsverticalpositionNote:overridesallotherverticalplacement
background
url
No
n/a
setsimagetobeusedinsteadoftableboxbackground
padx
integer,integer
No
n/a
padsthebackgroundimagewithhorizontalwhitespacefortextplacement.Note:thisisatwoparametercommand
pady
integer,integer
No
n/a
padsthebackgroundimagewithverticalwhitespacefortextplacement.Note:thisisatwoparametercommand
fullhtml
boolean
No
n/a
allowsyoutocontrolthehtmloverabackgroundpicturecompletely.Thehtmlcodeisexpectedinthe"text"attribute
frame
string
No
n/a
controlspopupsinadifferentframe.Seetheoverlibpageformoreinfoonthisfunction
timeout
string
No
n/a
callsthespecifiedjavascriptfunctionandtakesthereturnvalueasthetextthatshouldbedisplayedinthepopupwindow
delay
integer
No
n/a
makesthatpopupbehavelikeatooltip.Itwillpopuponlyafterthisdelayinmilliseconds
hauto
boolean
No
n/a
automaticallydetermineifthepopupshouldbetotheleftorrightofthemouse.
vauto
boolean
No
n/a
automaticallydetermineifthepopupshouldbeaboveorbelowthemouse.
overLIB可以接受任意个命令和参数。格式如下：命令[,'命令参数']
<ahref="javascript:void(0);"onclick="returnoverlib('Thisisastickywithacaption.Anditiscenteredunderthemouse!',STICKY,CAPTION,
'Sticky!',CENTER);"onmouseout="nd();">Clickhere!</a>
五、overlib的一些使用示例
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<scriptlanguage="JavaScript"src="overlib.js"></script><html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<ahref="#"onclick="returnoverlib('使用overlib的命令',CAPTION,'这是Caption命令，就是生成头部',HAUTO);""onmouseout="returnnd();">弹出测试</a>
<ahref="javascript:void(0);"onmouseover="returnoverlib('Thisisanordinarypopup.',CLOSECLICK);"onmouseout="returnnd();">here</a>
<ahref="javascript:void(0);"onmouseover="returnoverlib('Thisiswhatwecallasticky,sinceIstickaround(itgoesawayifyoumovethemouseOVERandthenOFFtheoverLIBpopup--ormouseoveranotheroverLIB).',STICKY,MOUSEOFF);"onmouseout="returnnd();">吸附性的提示框</a>
<ahref="javascript:void(0);"onclick="returnoverlib('Thisisastickywithacaption.Anditiscenteredunderthemouse!',STICKY,CAPTION,'Sticky!',CENTER);">含CAPTION的STICKY!</a>
<ahref="javascript:void(0);"onclick="returnoverlib('Settingsizeandposiztion!',STICKY,CAPTION,'Sticky!',HEIGHT,100,WIDTH,120,LEFT);">指定大小与位置弹出</a>
<ahref="javascript:void(0);"onclick="returnoverlib('Settingsizeandposiztion!',STICKY,CAPTION,'Sticky!',STATUS,'Hello');">设置状态栏</a>
</body>
</html>
六、自定义overlib。overlib有三种方式可以实现自定义。
1、我们上面用过的通过输入不同命令来实现自定义。
2、修改overlib.js中的默认值来实现自定义
3、在引用的页面指定变量来实现自定义。
overlib点击此处本站下载。
希望本文所述对大家JavaScript程序设计有所帮助。
