本文實例講述了overlib用法。分享給大家供大家參考，具體如下：
overLIB 是一個生成提示框與彈出菜單等頁面效果的一段非常優秀的JS代碼。
它可以簡單的通過設置一些參數或命令來改變彈出頁面的款式、皮膚與形狀,不但如此，它還提供了非常簡單的擴展功能，來足客戶的不同需求。
overLIB 使用非常的簡單。
一、在<head></head> 標簽內添加：
復制代碼代碼如下:
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
二、在<body></body>標簽內添加：
復制代碼代碼如下:
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
4.10以上的版本可省略此步
三、生成兩種不同款式(popup與sticky)的彈出頁面
<a href="javascript:void(0);" onmouseover="return overlib('這是一個popup.');" onmouseout="return nd();">popup示例</a><a href="javascript:void(0);" onmouseover="return overlib('這是一個sticky',STICKY, MOUSEOFF);" onmouseout="return nd();">stick示例 </a> 四、 命令與參數
popup
| Attribute Name | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | Yes | n/a | the text/html to display in the popup window |
| trigger | string | No | onMouseOver | What is used to trigger the popup window. Can be one of onMouseOver or onClick |
| sticky | boolean | No | false | Makes the popup stick around until closed |
| caption | string | No | n/a | sets the caption to title |
| fgcolor | string | No | n/a | color of the inside of the popup box |
| bgcolor | string | No | n/a | color of the border of the popup box |
| textcolor | string | No | n/a | sets the color of the text inside the box |
| capcolor | string | No | n/a | sets color of the box's caption |
| closecolor | string | No | n/a | sets the color of the close text |
| textfont | string | No | n/a | sets the font to be used by the main text |
| captionfont | string | No | n/a | sets the font of the caption |
| closefont | string | No | n/a | sets the font for the "Close" text |
| textsize | string | No | n/a | sets the size of the main text's font |
| captionsize | string | No | n/a | sets the size of the caption's font |
| closesize | string | No | n/a | sets the size of the "Close" text's font |
| width | integer | No | n/a | sets the width of the box |
| height | integer | No | n/a | sets the height of the box |
| left | boolean | No | false | makes the popups go to the left of the mouse |
| right | boolean | No | false | makes the popups go to the right of the mouse |
| center | boolean | No | false | makes the popups go to the center of the mouse |
| above | boolean | No | false | makes the popups go above the mouse. NOTE: only possible when height has been set |
| below | boolean | No | false | makes the popups go below the mouse |
| border | integer | No | n/a | makes the border of the popups thicker or thinner |
| offsetx | integer | No | n/a | how far away from the pointer the popup will show up, horizontally |
| offsety | integer | No | n/a | how far away from the pointer the popup will show up, vertically |
| fgbackground | url to image | No | n/a | defines a picture to use instead of color for the inside of the popup. |
| bgbackground | url to image | No | n/a | defines a picture to use instead of color for the border of the popup. NOTE: You will want to set bgcolor to "" or the color will show as well. NOTE: When having a Close link, Netscape will re-render the table cells, making things look incorrect |
| closetext | string | No | n/a | sets the "Close" text to something else |
| noclose | boolean | No | n/a | does not display the "Close" text on stickies with a caption |
| status | string | No | n/a | sets the text in the browsers status bar |
| autostatus | boolean | No | n/a | sets the status bar's text to the popup's text. NOTE: overrides status setting |
| autostatuscap | string | No | n/a | sets the status bar's text to the caption's text. NOTE: overrides status and autostatus settings |
| inarray | integer | No | n/a | tells overLib to read text from this index in the ol_text array, located in overlib.js. This parameter can be used instead of text |
| caparray | integer | No | n/a | tells overLib to read the caption from this index in the ol_caps array |
| capicon | url | No | n/a | displays the image given before the popup caption |
| snapx | integer | No | n/a | snaps the popup to an even position in a horizontal grid |
| snapy | integer | No | n/a | snaps the popup to an even position in a vertical grid |
| fixx | integer | No | n/a | locks the popups horizontal position Note: overrides all other horizontal placement |
| fixy | integer | No | n/a | locks the popups vertical position Note: overrides all other vertical placement |
| background | url | No | n/a | sets image to be used instead of table box background |
| padx | integer,integer | No | n/a | pads the background image with horizontal whitespace for text placement. Note: this is a two parameter command |
| pady | integer,integer | No | n/a | pads the background image with vertical whitespace for text placement. Note: this is a two parameter command |
| fullhtml | boolean | No | n/a | allows you to control the html over a background picture completely. The html code is expected in the "text" attribute |
| frame | string | No | n/a | controls popups in a different frame. See the overlib page for more info on this function |
| timeout | string | No | n/a | calls the specified javascript function and takes the return value as the text that should be displayed in the popup window |
| delay | integer | No | n/a | makes that popup behave like a tooltip. It will popup only after this delay in milliseconds |
| hauto | boolean | No | n/a | automatically determine if the popup should be to the left or right of the mouse. |
| vauto | boolean | No | n/a | automatically determine if the popup should be above or below the mouse. |
overLIB 可以接受任意個命令和參數。格式如下：命令[,'命令參數']
<a href="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,'Sticky!', CENTER);" onmouseout="nd();">Click here!</a> 五、 overlib的一些使用示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><scriptlanguage="JavaScript" src="overlib.js"></script><html><head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標題文檔</title></head><body><ahref="#" onclick="return overlib('使用overlib的命令', CAPTION, '這是Caption命令，就是生成頭部',HAUTO);"" onmouseout="return nd();">彈出測試</a><ahref="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.',CLOSECLICK);" onmouseout="return nd();">here</a><ahref="javascript:void(0);" onmouseover="return overlib('This is what we call a sticky, since I stick around (it goes away if you move the mouse OVER and then OFF the overLIB popup--or mouseover another overLIB).', STICKY, MOUSEOFF);" onmouseout="return nd();">吸附性的提示框</a><ahref="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,'Sticky!',CENTER);">含CAPTION的STICKY!</a><ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',HEIGHT, 100,WIDTH,120,LEFT);">指定大小與位置彈出</a><ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',STATUS ,'Hello');">設置狀態欄</a></body></html> 六、自定義overlib。overlib有三種方式可以實現自定義。
1、我們上面用過的通過輸入不同命令來實現自定義。
2、修改overlib.js中的默認值來實現自定義
3、在引用的頁面指定變量來實現自定義。
overlib點擊此處本站下載。
希望本文所述對大家JavaScript程序設計有所幫助。
