本文實例講述了overlib用法。分享給大家參考,具體如下:
overLIB 是一個產生提示框與彈出式選單等頁面效果的一段非常優秀的JS程式碼。
它可以簡單的透過設定一些參數或指令來改變彈出頁面的款式、皮膚與形狀,不但如此,它還提供了非常簡單的擴展功能,來足客戶的不同需求。
overLIB 使用非常的簡單。
一、在
標籤內新增:三、產生兩種不同款式(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>
四、 指令與參數
彈出視窗
屬性名稱 | 類型 | 必填 | 預設 | 描述 |
---|---|---|---|---|
文字 | 字串 | 是的 | 不適用 | 要在彈出視窗中顯示的文字/html |
觸發 | 字串 | 沒有 | onMouseOver | 什麼是用來觸發彈窗的。可以是 onMouseOver 或 onClick 之一 |
黏性 | 布林值 | 沒有 | 假 | 使彈出視窗一直存在直到關閉 |
標題 | 字串 | 沒有 | 不適用 | 將標題設定為標題 |
fg顏色 | 字串 | 沒有 | 不適用 | 彈出框內部的顏色 |
背景顏色 | 字串 | 沒有 | 不適用 | 彈出框邊框的顏色 |
文字顏色 | 字串 | 沒有 | 不適用 | 設定框內文字的顏色 |
capcolor | 字串 | 沒有 | 不適用 | 設定框標題的顏色 |
關閉顏色 | 字串 | 沒有 | 不適用 | 設定關閉文字的顏色 |
文字字體 | 字串 | 沒有 | 不適用 | 設定正文使用的字體 |
標題字體 | 字串 | 沒有 | 不適用 | 設定標題的字體 |
關閉字體 | 字串 | 沒有 | 不適用 | 設定「關閉」文字的字體 |
文字大小 | 字串 | 沒有 | 不適用 | 設定正文字體的大小 |
標題大小 | 字串 | 沒有 | 不適用 | 設定標題字體的大小 |
關閉尺寸 | 字串 | 沒有 | 不適用 | 設定「關閉」文字的字體大小 |
寬度 | 整數 | 沒有 | 不適用 | 設定框的寬度 |
身高 | 整數 | 沒有 | 不適用 | 設定盒子的高度 |
左 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠左側 |
對 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠右側 |
中心 | 布林值 | 沒有 | 假 | 使彈出視窗轉到滑鼠中心 |
以上 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠上方。注意:僅當高度已設定時才可能 |
下面 | 布林值 | 沒有 | 假 | 使彈出視窗位於滑鼠下方 |
邊框 | 整數 | 沒有 | 不適用 | 使彈出視窗的邊框變粗或變細 |
偏移量 | 整數 | 沒有 | 不適用 | 彈出視窗將在水平方向上距離指針多遠 |
偏移量 | 整數 | 沒有 | 不適用 | 彈出視窗將在垂直方向上距離指針多遠 |
fg背景 | 影像網址 | 沒有 | 不適用 | 定義用來取代彈出視窗內部顏色的圖片。 |
背景 | 影像網址 | 沒有 | 不適用 | 定義用來取代彈出視窗邊框顏色的圖片。注意:您需要將 bgcolor 設為“”,否則顏色也會顯示。注意:當有關閉連結時,Netscape 將重新渲染表格單元格,使內容看起來不正確 |
關閉文字 | 字串 | 沒有 | 不適用 | 將「關閉」文字設定為其他內容 |
不關閉 | 布林值 | 沒有 | 不適用 | 不會在有標題的便籤上顯示「關閉」文字 |
狀態 | 字串 | 沒有 | 不適用 | 設定瀏覽器狀態列中的文字 |
自動狀態 | 布林值 | 沒有 | 不適用 | 將狀態列的文字設定為彈出視窗的文字。注意:覆蓋狀態設定 |
自動狀態帽 | 字串 | 沒有 | 不適用 | 將狀態列的文字設定為標題的文字。注意:覆蓋狀態和自動狀態設定 |
數組 | 整數 | 沒有 | 不適用 | 告訴 overLib 從位於 overlib.js 的 ol_text 陣列中的該索引讀取文字。可以使用此參數代替文字 |
caparray | 整數 | 沒有 | 不適用 | 告訴 overLib 從 ol_caps 數組中的該索引讀取標題 |
卡皮肯 | 網址 | 沒有 | 不適用 | 顯示彈出標題之前給出的圖像 |
快照 | 整數 | 沒有 | 不適用 | 將彈出視窗對齊到水平網格中的均勻位置 |
敏捷 | 整數 | 沒有 | 不適用 | 將彈出視窗對齊到垂直網格中的均勻位置 |
修復 | 整數 | 沒有 | 不適用 | 鎖定彈出視窗水平位置注意:覆蓋所有其他水平放置 |
固定 | 整數 | 沒有 | 不適用 | 鎖定彈出視窗的垂直位置注意:覆蓋所有其他垂直位置 |
背景 | 網址 | 沒有 | 不適用 | 設定要使用的影像來取代表格框背景 |
padx | 整數,整數 | 沒有 | 不適用 | 用水平空白填充背景圖像以放置文字。注意:這是一個兩個參數的指令 |
稻田 | 整數,整數 | 沒有 | 不適用 | 用垂直空白填充背景圖像以放置文字。注意:這是一個兩個參數的指令 |
完整html | 布林值 | 沒有 | 不適用 | 讓您可以完全控制背景圖片上的html。 html 程式碼應位於「text」屬性 |
框架 | 字串 | 沒有 | 不適用 | 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程序设计有所帮助。