Explication détaillée des exemples d'utilisation du plug-in JS overlib_compétences javascript

Les exemples de cet article décrivent l'utilisation d'overlib. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

overLIB est un très excellent code JS qui génère des effets de page tels que des boîtes d'invite et des menus contextuels.

Il peut simplement modifier le style, l'apparence et la forme de la page contextuelle en définissant certains paramètres ou commandes. De plus, il fournit également des fonctions d'extension très simples pour répondre aux différents besoins des clients.

overLIB est très simple à utiliser.

1. Ajoutez la balise 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 :

Copiez le code Le code est le suivant :

670c7960c170a14501a8e29e3c417ae606d2e91aceacbb2485dcb9815fa9362e2cacc6d41bbb37262a98f745aa00fbf0

2. Ajoutez la balise 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 :

Copiez le code Le code est le suivant :

< div id="overDiv" style="position:absolute; >

3. Générez deux styles différents de pages pop-up (popup et sticky)

4. 명령 및 매개변수

팝업

속성 이름	유형	필수	기본값	설명
텍스트	문자열	예	해당 없음	팝업창에 표시할 텍스트/html
트리거	문자열	아니요	onMouseOver	팝업창을 실행하는 데 사용되는 것입니다. onMouseOver 또는 onClick 중 하나일 수 있습니다
끈적	부울	아니요	거짓	닫을 때까지 팝업이 계속 표시되도록 합니다
캡션	문자열	아니요	해당 없음	캡션을 제목으로 설정
fgcolor	문자열	아니요	해당 없음	팝업박스 내부 색상
bgcolor	문자열	아니요	해당 없음	팝업 상자 테두리 색상
텍스트 색상	문자열	아니요	해당 없음	상자 안의 텍스트 색상을 설정합니다
캡컬러	문자열	아니요	해당 없음	상자 캡션 색상 설정
컬러 닫기	문자열	아니요	해당 없음	닫는 텍스트의 색상을 설정합니다
텍스트 글꼴	문자열	아니요	해당 없음	주요 텍스트에 사용할 글꼴을 설정합니다
캡션글꼴	문자열	아니요	해당 없음	캡션 글꼴 설정
글꼴 닫기	문자열	아니요	해당 없음	"닫기" 텍스트의 글꼴을 설정합니다
텍스트 크기	문자열	아니요	해당 없음	본문의 글꼴 크기를 설정합니다
캡션 크기	문자열	아니요	해당 없음	캡션 글꼴 크기 설정
크기 닫기	문자열	아니요	해당 없음	"닫기" 텍스트의 글꼴 크기를 설정합니다
너비	정수	아니요	해당 없음	상자 너비 설정
키	정수	아니요	해당 없음	상자 높이 설정
왼쪽	부울	아니요	거짓	팝업을 마우스 왼쪽으로 이동하게 합니다
그렇습니다	부울	아니요	거짓	팝업을 마우스 오른쪽으로 이동하게 합니다
센터	부울	아니요	거짓	팝업이 마우스 중앙으로 이동하게 합니다
위	부울	아니요	거짓	팝업이 마우스 위로 이동하도록 합니다. 참고: 높이가 설정된 경우에만 가능
아래	부울	아니요	거짓	팝업이 마우스 아래로 이동하도록 합니다
경계	정수	아니요	해당 없음	팝업 테두리를 두껍거나 얇게 만듭니다
오프셋x	정수	아니요	해당 없음	포인터에서 팝업이 수평으로 얼마나 멀리 표시되는지
오프셋	정수	아니요	해당 없음	팝업이 포인터에서 수직으로 얼마나 멀리 표시되는지
fg배경	이미지 URL	아니요	해당 없음	팝업 내부 색상 대신 사용할 그림을 정의합니다.
배경배경	이미지 URL	아니요	해당 없음	팝업 테두리에 색상 대신 사용할 그림을 정의합니다. 참고: bgcolor를 ""로 설정하지 않으면 색상도 표시됩니다. 참고: 닫기 링크가 있으면 Netscape는 테이블 셀을 다시 렌더링하여 상황이 올바르지 않게 보이게 합니다
텍스트 닫기	문자열	아니요	해당 없음	'닫기' 텍스트를 다른 것으로 설정
닫지 않음	부울	아니요	해당 없음	캡션이 있는 스티커에 "닫기" 텍스트를 표시하지 않습니다
상태	문자열	아니요	해당 없음	브라우저 상태 표시줄에 텍스트를 설정합니다
자동 상태	부울	아니요	해당 없음	상태 표시줄의 텍스트를 팝업 텍스트로 설정합니다. 참고: 상태 설정을 무시합니다
autostatuscap	문자열	아니요	해당 없음	상태 표시줄의 텍스트를 캡션의 텍스트로 설정합니다. 참고: 상태 및 자동 상태 설정을 무시합니다
배열	정수	아니요	해당 없음	overlib.js에 있는 ol_text 배열의 이 인덱스에서 텍스트를 읽도록 overLib에 지시합니다. 이 매개변수는 텍스트 대신 사용할 수 있습니다
카패레이	정수	아니요	해당 없음	overLib에게 ol_caps 배열의 이 인덱스에서 캡션을 읽도록 지시합니다
카피콘	URL	아니요	해당 없음	팝업 캡션 이전에 제공된 이미지를 표시합니다
스냅	정수	아니요	해당 없음	팝업을 수평 그리드의 동일한 위치에 고정
빠른	정수	아니요	해당 없음	팝업을 수직 그리드의 동일한 위치에 고정
픽스	정수	아니요	해당 없음	팝업 가로 위치를 잠급니다. 참고: 다른 모든 가로 배치를 재정의합니다
고정	정수	아니요	해당 없음	팝업 수직 위치를 잠급니다. 참고: 다른 모든 수직 배치를 무시합니다
배경	URL	아니요	해당 없음	테이블 상자 배경 대신 사용할 이미지 설정
패드x	정수,정수	아니요	해당 없음	텍스트 배치를 위해 배경 이미지를 수평 공백으로 채웁니다. 참고: 이는 두 개의 매개변수 명령입니다
패디	정수,정수	아니요	해당 없음	텍스트 배치를 위해 배경 이미지에 수직 공백을 채웁니다. 참고: 이는 두 개의 매개변수 명령입니다
전체 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程序设计有所帮助。