JS外掛程式overlib用法實例詳解_javascript技巧
本文實例講述了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程序设计有所帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
解析JSP註解的使用方法和分類
Feb 01, 2024 am 08:01 AM
JSP註解的分類及用法解析JSP註解分為兩種：單行註解：以結尾，只能註解單行程式碼。多行註解：以/*開頭，以*/結尾，可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼，使其更易於閱
WPSdatedif函數的用法
Feb 20, 2024 pm 10:27 PM
WPS是一款常用的辦公室軟體套件，其中的WPS表格功能被廣泛用於資料處理和計算。在WPS表格中，有一個非常有用的函數，即DATEDIF函數，它用於計算兩個日期之間的時間差。 DATEDIF函數是英文單字DateDifference的縮寫，它的語法如下：DATEDIF(start_date,end_date,unit)其中，start_date表示起始日期
如何正確使用C語言的exit函數
Feb 18, 2024 pm 03:40 PM
c語言exit函數怎麼用，需要具體程式碼範例在C語言中，我們常常需要在程式中提前終止程式的執行，或是在某個特定的條件下退出程式。 C語言提供了exit()函數來實作這個功能。本文將介紹exit()函數的用法，並提供對應的程式碼範例。 exit()函數是C語言中的標準函式庫函數，它包含在頭檔中。它的作用是終止程式的執行，並且可以帶一個整數
Python函數介紹：abs函數的用法和範例
Nov 03, 2023 pm 12:05 PM
Python函數介紹：abs函數的用法和範例一、abs函數的用法介紹在Python中，abs函數是一個內建函數，用於計算給定數值的絕對值。它可以接受一個數字參數，並傳回該數字的絕對值。 abs函數的基本語法如下：abs(x)其中，x是要計算絕對值的數值參數，可以是整數或浮點數。二、abs函數的範例下面我們將透過一些具體的範例來展示abs函數的用法：範例1：計算
Python函數介紹：isinstance函數的用法和範例
Nov 04, 2023 pm 03:15 PM
Python函數介紹：isinstance函數的用法和範例Python是一門功能強大的程式語言，提供了許多內建函數，使得程式設計變得更加方便和有效率。其中一個非常有用的內建函數是isinstance()函數。本文將介紹isinstance函數的用法和範例，並提供具體的程式碼範例。 isinstance()函數用來判斷一個物件是否是指定的類別或類型的實例。該函數的語法如下
MySQL ISNULL 函數詳解及用法介紹
Mar 01, 2024 pm 05:24 PM
MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值，如果表達式為NULL則回傳1，否則回傳0。 ISNULL()函數可以在SELECT語句中使用，也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法：ISNULL(expression)其中，expression是要判斷是否為NULL的表達式或
使用蘋果快速指令的方法
Feb 18, 2024 pm 05:22 PM
蘋果快捷指令怎麼用隨著科技的不斷發展，手機成為了人們生活中不可或缺的一部分。而在眾多手機品牌中，蘋果手機憑藉其穩定的系統和強大的功能一直備受用戶的喜愛。其中，蘋果快捷指令這項功能更是讓用戶的手機使用體驗更加便利和有效率。蘋果快捷指令是蘋果公司為其iOS12及更高版本推出的一項功能，透過建立和執行自訂指令，幫助用戶簡化手機操作流程，以達到更有效率的工作和
解析SQL中使用distinct關鍵字
Feb 18, 2024 pm 09:21 PM
SQL中distinct用法詳解在SQL資料庫中，我們常常會遇到需要移除重複資料的情況。此時，我們可以使用distinct關鍵字，它能夠幫助我們去除重複數據，使得查詢結果更加清晰和準確。 distinct的基本使用方法非常簡單，只需要在select語句中使用distinct關鍵字即可。例如，以下是一個普通的select語句：SELECTcolumn_name
