overlib的使用

最新推荐文章于 2013-04-12 20:54:59 发布

msg_java2011

最新推荐文章于 2013-04-12 20:54:59 发布

阅读量868

点赞数

分类专栏： JavaScript 文章标签： javascript html 文档扩展测试 div

本文链接：https://blog.csdn.net/msg_java2011/article/details/6750354

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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);" οnmοuseοver="return overlib('这是一个popup.');" οnmοuseοut="return nd();">popup示例</a>
<a href="javascript:void(0);" οnmοuseοver="return overlib('这是一个sticky',STICKY, MOUSEOFF);" οnmοuseοut="return nd();">stick示例 </a>
四、命令与参数
overLIB 可以接受任意个命令和参数。格式如下：命令[,'命令参数']
<a href="javascript:void(0);" οnclick="return overlib('This is a sticky   with a caption. And it is centered under the mouse!', STICKY, CAPTION,
   'Sticky!', CENTER);" οnmοuseοut="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="#" οnclick="return overlib('使用overlib的命令', CAPTION, '这是Caption命令，就是生成头部',HAUTO);"" οnmοuseοut="return nd();" >弹出测试</a>
<a href="javascript:void(0);" οnmοuseοver="return overlib('This is an ordinary popup.',CLOSECLICK);" οnmοuseοut="return nd();">here</a>
<a href="javascript:void(0);" οnmοuseοver="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);" οnmοuseοut="return nd();">吸附性的提示框</a>
<a href="javascript:void(0);" οnclick="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);" οnclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',HEIGHT, 100,WIDTH,120,LEFT);">指定大小与位置弹出</a>
<a href="javascript:void(0);" οnclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',STATUS ,'Hello');">设置状态栏</a>
</body>
</html>

六、自定义overlib。overlib有三种方式可以实现自定义。
1、我们上面用过的通过输入不同命令来实现自定义。
2、修改overlib.js中的默认值来实现自定义
3、在引用的页面指定变量来实现自定义。

msg_java2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overlib的使用

overlib 是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。它可以简单的通过设置一些参数或命令来改变弹出页面的款式、皮肤与形状,不但如此，它还提供了非常简单的扩展功能。 overLIB 使用非常的简单。一、在标签内添加：二、在标签内添加
复制链接

扫一扫