氣泡式提示
系統(tǒng)
2457 0
此氣泡式提示部件可快速部署，易于使用，幫你快速的開(kāi)發(fā)出漂亮的頁(yè)面。
使用方式：
１．
當(dāng)前頁(yè)面支持
DOM
模型；
２．
鏈接不但得嵌入在塊級(jí)的標(biāo)簽中，并且具有
title
和
href
兩個(gè)屬性；
３．
當(dāng)鼠標(biāo)移動(dòng)經(jīng)過(guò)此鏈接時(shí)，顯示美麗的提示。
組成部分：
l
2K
的
javascript
文件；
l
很少的
css
文件；
l
一張圖片；
l
簡(jiǎn)單的四段
html
即可展示她的芳容。
我們來(lái)看看那四段吧。
１．
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>
２．
指定有效對(duì)象（區(qū)域）
我們可以把氣泡式提示指定的任意區(qū)域，這些區(qū)域使用
id
來(lái)標(biāo)識(shí)。
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號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
