overLIB的用法与示例

最新推荐文章于 2025-12-08 09:18:56 发布

转载最新推荐文章于 2025-12-08 09:18:56 发布 · 2.2k 阅读

文章标签：

#javascript #文档 #扩展 #测试 #div #c

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

overLIB是一款优秀的JS库，用于创建弹出窗口和提示框。通过简单的命令即可定制样式，并支持多种显示模式，如popup和sticky。此外，用户还可以通过修改默认值来自定义overLIB的行为。

overLIB 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。
它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此，它还提供了非常简单的扩展功能，来足客户的不同需求。

overLIB 使用非常的简单。
一、在<head></head> 标签内添加： <script type="text/javascript" src="overlib.js"></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>
四、命令与参数
  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" >

< script language ="JavaScript" src ="overlib.js" ></ script >< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >

< title > 无标题文档 </ title >

</ head >

< body >

< a href ="#" onclick ="return overlib('使用overlib的命令', CAPTION, '这是Caption命令，就是生成头部',HAUTO);" " onmouseout ="return nd();" > 弹出测试 </ a >

< a href ="javascript:void(0);" onmouseover ="return overlib('This is an ordinary popup.',CLOSECLICK);" onmouseout ="return nd();" > here </ a >

< a href ="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 >

< 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);" > 含CAPTION的STICKY! </ a >

< a href ="javascript:void(0);" onclick ="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',HEIGHT, 100,WIDTH,120,LEFT);" > 指定大小与位置弹出 </ a >