overLIB JS插件详细教程：快速创建提示框与弹出菜单

javascript

145 浏览量更新于2024-09-01 收藏 74KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"JS插件overlib用法实例详解" overlib是一个JavaScript库，用于创建提示框和弹出菜单，提供了一种简便的方式来增强网页的交互性。它允许开发者通过简单的参数配置来定制弹出窗口的样式、外观以及行为，以满足不同用户的需求。一、集成overlib 在使用overlib之前，需要将库文件引入到HTML文档中。这通常在`<head>`标签内部完成，添加如下代码： ```html <script type="text/javascript" src="overlib.js">  </script> ``` 对于4.10及以上版本，可以省略一个步骤，即在`<body>`标签内添加一个隐藏的`<div>`元素，用于存放弹出内容： ```html <div id="overDiv" style="position:absolute;visibility:hidden;z-index:1000;"></div> ``` 二、创建弹出效果 overlib支持多种类型的弹出效果，例如"popup"（弹出）和"sticky"（粘性）。下面的实例展示了如何创建这两种效果： - popup示例：当鼠标悬停在链接上时，弹出框会显示文本，并在鼠标离开时自动关闭。 ```html <a href="javascript:void(0);" onmouseover="return overlib('这是一个popup。')" onmouseout="return nd();">popup示例</a> ``` - sticky示例：当鼠标悬停在链接上时，弹出框会显示文本，即使鼠标离开也不会立即关闭，只有再次触发关闭事件（如点击）时才会消失。 ```html <a href="javascript:void(0);" onmouseover="return overlib('这是一个sticky', STICKY, MOUSEOFF)" onmouseout="return nd();">sticky示例</a> ``` 三、命令与参数 overlib提供了丰富的参数来控制弹出窗口的行为和外观，以下是一些常见的属性： - `text`：必需，字符串类型，定义弹出窗口中要显示的文本或HTML内容。 - `trigger`：非必需，字符串类型，可以选择在`onMouseOver`或`onClick`事件触发弹出窗口。 - `sticky`：非必需，布尔值，如果设置为`true`，弹出窗口会保持打开状态，直到用户手动关闭。 - `caption`：非必需，字符串类型，设置弹出窗口的标题。除了这些，还有更多参数如背景色、字体、尺寸等，可以根据需求灵活调整。 overlib为开发者提供了方便且强大的工具，用于创建各种自定义的提示和弹出菜单，无需深入JavaScript的复杂实现，只需简单配置就能实现丰富的页面交互效果。

资源详情

资源推荐

JS插件插件overlib用法实例详解用法实例详解

本文实例讲述了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

下载后可阅读完整内容，剩余4页未读，立即下载

Syndergaard

粉丝: 6
资源: 938

overLIB JS插件详细教程：快速创建提示框与弹出菜单

overlib.rar 实用js类库

overlib压缩包

5020-微信小程序基于JAVA微信点餐小程序设计+ssm（源码+数据库+lun文）.zip

基于 Flask 的数字猜谜系统.zip

5206-微信小程序投票评选系统的设计与实现ssm（源码+数据库+lun文）.zip

PeaZip 64 bit 9.9.1 free 解压缩工具 杜绝360垃圾

vit_keras-0.0.12-py3-none-any.whl

5272-微信小程序微信智能招聘小程序设计+ssm（源码+数据库+lun文）.zip

1.Ansible 自动化运维实战笔记.xmind分享给需要的同学

bacpypes-0.15.0-py3-none-any.whl

人工智能大作业-无人机图像目标检测基于python源代码+文档说明+数据集.zip

【前景培训教材】第二十三章 4G干扰优化专项.pdf

5015-微信小程序基于微信的设备故障报修管理系统设计与实现+ssm（源码+数据库+lun文）.zip

基于 Flask 和 Azure 的智能医疗诊断应用.zip

影视热门排行网站系统.zip

5211-微信小程序的水果销售系统的设计与实现springboot（源码+数据库+lun文）.zip

5184-微信小程序社区二手物品交易小程序ssm（源码+数据库+lun文）.zip

【前景培训教材】第十九章投诉处理.pdf

5002-微信小程序教学辅助微信小程序设计+ssm（源码+数据库+lun文）.zip

ssm+mysql的小型超市仓库管理系统（源码+lw+ppt）

最新资源

PeaZip 64 bit 9.9.1 free 解压缩工具杜绝360垃圾