JS插件overlib用法实例详解
更新时间:2015年12月28日 10:01 点击:2277
本文实例讲述了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 |
captionsize | string | No | n/a | sets the size of the caption's font |
closesize | string | No | n/a | sets the size of the "Close" text's font |
width | integer | No | n/a | sets the width of the box |
height | integer | No | n/a | sets the height of the box |
left | boolean | No | false | makes the popups go to the left of the mouse |
right | boolean | No | false | makes the popups go to the right of the mouse |
center | boolean | No | false | makes the popups go to the center of the mouse |
above | boolean | No | false | makes the popups go above the mouse. NOTE: only possible when height has been set |
below | boolean | No | false | makes the popups go below the mouse |
border | integer | No | n/a | makes the border of the popups thicker or thinner |
offsetx | integer | No | n/a | how far away from the pointer the popup will show up, horizontally |
offsety | integer | No | n/a | how far away from the pointer the popup will show up, vertically |
fgbackground | url to image | No | n/a | defines a picture to use instead of color for the inside of the popup. |
bgbackground | url to image | No | n/a | defines a picture to use instead of color for the border of the popup. NOTE: You will want to set bgcolor to "" or the color will show as well. NOTE: When having a Close link, Netscape will re-render the table cells, making things look incorrect |
closetext | string | No | n/a | sets the "Close" text to something else |
noclose | boolean | No | n/a | does not display the "Close" text on stickies with a caption |
status | string | No | n/a | sets the text in the browsers status bar |
autostatus | boolean | No | n/a | sets the status bar's text to the popup's text. NOTE: overrides status setting |
autostatuscap | string | No | n/a | sets the status bar's text to the caption's text. NOTE: overrides status and autostatus settings |
inarray | integer | No | n/a | tells overLib to read text from this index in the ol_text array, located in overlib.js. This parameter can be used instead of text |
caparray | integer | No | n/a | tells overLib to read the caption from this index in the ol_caps array |
capicon | url | No | n/a | displays the image given before the popup caption |
snapx | integer | No | n/a | snaps the popup to an even position in a horizontal grid |
snapy | integer | No | n/a | snaps the popup to an even position in a vertical grid |
fixx | integer | No | n/a | locks the popups horizontal position Note: overrides all other horizontal placement |
fixy | integer | No | n/a | locks the popups vertical position Note: overrides all other vertical placement |
background | url | No | n/a | sets image to be used instead of table box background |
padx | integer,integer | No | n/a | pads the background image with horizontal whitespace for text placement. Note: this is a two parameter command |
pady | integer,integer | No | n/a | pads the background image with vertical whitespace for text placement. Note: this is a two parameter command |
fullhtml | boolean | No | n/a | allows you to control the html over a background picture completely. The html code is expected in the "text" attribute |
frame | string | No | n/a | 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程序设计有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29