當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > 鏈接的注釋怎么寫

鏈接的注釋怎么寫

2012/10/29 11:31:51作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

鏈接的注釋

【實(shí)例描述】

當(dāng)用戶移動(dòng)鼠標(biāo)到某鏈接時(shí)，可以為鏈接提供簡(jiǎn)要說(shuō)明。本例以滾動(dòng)提示的方式，為鏈接設(shè)置注釋。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（wangbatian.cn）</title>
</head>
<body>
<script>
if (!document.layers&&!document.all)
event="test"
//顯示提示的方法
function shownote(current,e,text)
{
//IE瀏覽器的情況下
if (document.all&&document.readyState=="complete"){
//滾動(dòng)顯示提示內(nèi)容
document.all.tip.innerHTML='<marquee 
style="border:1px solid black">'+text+'</marquee>'
//根據(jù)鼠標(biāo)位置設(shè)置提示位置
document.all.tip.style.pixelLeft=event.clientX+
document.body.scrollLeft+10
document.all.tip.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tip.style.visibility="visible"
}
//Netscape瀏覽器的情況下
else if (document.layers){
document.tip.document.nstip.document.write('<b>'+text+'</b>')
document.tip.document.nstip.document.close()
document.tip.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tip.left=e.pageX+10
document.tip.top=e.pageY+10
document.tip.visibility="show"
}
}
//隱藏提示的方法
function hidenote()
{
if (document.all)
document.all.tip.style.visibility="hidden"  //隱藏div的顯示
else if (document.layers){
clearInterval(currentscroll)
document.tip.visibility="hidden"
}
}
//提示信息的滾動(dòng)方法
function scrolltip()
{
if (document.tip.document.nstip.left>=
-document.tip.document.nstip.document.width)
document.tip.document.nstip.left-=5
else
document.tip.document.nstip.left=150
}
</script>
<div id="tip" style="position:absolute;clip:rect(0 150 50 0);
width:150px;background-color:#99FF99; top: 31px; 
left: 103px; visibility: hidden; height: 13px"> 
</div>
<a href="http://google.com" onMouseOver="shownote(this,event,
'國(guó)外第一搜索引擎，歡迎使用')" onMouseOut="hidenote()">國(guó)外搜索</a>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是div的隱藏和顯示，還有提示信息的滾動(dòng)功能。本例中提供三個(gè)方法“shownote”、“hidenote”和“scrolltip”?！皊hownote’’方法顯示div的提示信息，并通過(guò)“scrolltip’’滾動(dòng)顯示提示文本。當(dāng)鼠標(biāo)離開(kāi)鏈接時(shí)使用“hidenote”方法隱藏注釋。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：鏈接的注釋 進(jìn)行本實(shí)例源碼下載