氣泡式提示
系統(tǒng)
2149 0
此氣泡式提示部件可快速部署，易于使用，幫你快速的開發(fā)出漂亮的頁面。
使用方式：
１．
當(dāng)前頁面支持
DOM
模型；
２．
鏈接不但得嵌入在塊級的標(biāo)簽中，并且具有
title
和
href
兩個(gè)屬性；
３．
當(dāng)鼠標(biāo)移動(dòng)經(jīng)過此鏈接時(shí)，顯示美麗的提示。
組成部分：
l
2K
的
javascript
文件；
l
很少的
css
文件；
l
一張圖片；
l
簡單的四段
html
即可展示她的芳容。
我們來看看那四段吧。
１．
js
文件的引用
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
<
scripttype
=
"
text/javascript
"
src
=
"
BubbleTooltips.js
"
><
/
script>
２．
指定有效對象（區(qū)域）
我們可以把氣泡式提示指定的任意區(qū)域，這些區(qū)域使用
id
來標(biāo)識。
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
<
scripttype
=
"
text/javascript
"
>
2
window.onload
=
function
(){enableTooltips(
"
content
"
)};
3
<
/
script>
4
5
３．html
片段
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
<
span
class
="tooltip"
>
2
<
span
class
="top"
>
titleofthelink
</
span
>
3
<
b
class
="bottom"
>
urlofthelink,max30chars
</
b
>
4
</
span
>
5
6
４．
Css
文件
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
tooltip,.tooltip*
{
display
:
block
}
/*
addedbyjavascript
*/
2
.tooltip
{
width
:
200px
;
color
:
#000
;
3
4
font
:
lighter11px/1.3Arial,sans-serif
;
5
6
text-decoration
:
none
;
text-align
:
center
}
7
.tooltipspan.top
{
padding
:
30px8px0
;
8
background
:
url(bt.gif)no-repeattop
}
9
.tooltipb.bottom
{
padding
:
3px8px15px
;
color
:
#548912
;
10
background
:
url(bt.gif)no-repeatbottom
}
11
12
源碼下載：
點(diǎn)擊下載
思想指導(dǎo)實(shí)踐，實(shí)踐加以應(yīng)用，應(yīng)用創(chuàng)造價(jià)值
氣泡式提示
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
