鼠標(biāo)在文本上移動(dòng)時(shí)層的顯示與消失
發(fā)表時(shí)間：2024-01-25 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]花了兩天的時(shí)間才把這個(gè)簡(jiǎn)單的東西給做出來(lái)。本來(lái)早就想做這個(gè)東西的，但是由于......(跟老板后面做事，當(dāng)然空閑的時(shí)間就少了，唉，實(shí)在不好意思，因?yàn)樽约翰徊�，所以找了個(gè)借口)。剛好現(xiàn)在公司又讓我做個(gè)房產(chǎn)管理系統(tǒng)，要用這樣的一個(gè)方法了，所以才狠下心來(lái)非把這個(gè)做出來(lái)不可。我認(rèn)為這個(gè)例子非常實(shí)用(個(gè)人看...
花了兩天的時(shí)間才把這個(gè)簡(jiǎn)單的東西給做出來(lái)。本來(lái)早就想做這個(gè)東西的，但是由于......(跟老板后面做事，當(dāng)然空閑的時(shí)間就少了，唉，實(shí)在不好意思，因?yàn)樽约翰徊�，所以找了個(gè)借口)。剛好現(xiàn)在公司又讓我做個(gè)房產(chǎn)管理系統(tǒng)，要用這樣的一個(gè)方法了，所以才狠下心來(lái)非把這個(gè)做出來(lái)不可。我認(rèn)為這個(gè)例子非常實(shí)用(個(gè)人看法)，而且好多大型網(wǎng)站上都有這種應(yīng)用。今天寫(xiě)下來(lái)和各位朋友一起分享。以下就是我的所有代碼，有不妥之處還請(qǐng)各位高人指教，在此先謝了。
把這里的所有代碼都放在<body>與</body>之間即可
<script language=javascript>
<!--
function hiddiv()
{
document.all.ab.style.display="none"
}
function showdiv()
{
document.all.ab.style.display=""
document.all.ab.style.left=window.event.clientX+15
document.all.ab.style.top=window.event.clientY
}
//-->
</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區(qū)星海街東側(cè)<br>電話：0512-65103588-206</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(); onmousemove=showdiv();>發(fā)現(xiàn)之旅</a></td>
</tr>
</table>
當(dāng)然了這里的功能比較簡(jiǎn)單，沒(méi)有對(duì)瀏覽器類(lèi)型進(jìn)行判斷，本人不才，就把這個(gè)問(wèn)題留給各位了，歡迎每一位朋友來(lái)修改這個(gè)問(wèn)題。
在這里還有一個(gè)問(wèn)題就是如果文本不止一個(gè)、定義的層也就不止一個(gè)。如果還用這樣的方法就會(huì)出錯(cuò)，我對(duì)這個(gè)問(wèn)題研究了一下，用下面的這個(gè)方法就可以解決了。
<script language=javascript>
<!--
function hiddiv(blah)
{
blah.style.display="none"
}
function showdiv(blah)
{
blah.style.display=""
blah.style.left=window.event.clientX+15
blah.style.top=window.event.clientY
}
//-->
</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區(qū)星海街東側(cè)<br>電話：0512-65103588-20611</div>
<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新區(qū)明星街南側(cè)<br>電話：0512-65103588-20622</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>發(fā)現(xiàn)之旅</a></td>
</tr>
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和風(fēng)景苑</a></td>
</tr>
</table>
如果有更多的文本和層的話以此類(lèi)推即可。
在這里有幾點(diǎn)要說(shuō)明的就是：
1、showdiv中帶參數(shù)時(shí)再用document.all.ab.style.display=""就不適用了，關(guān)于這點(diǎn)朋友們可以參考有關(guān)書(shū)籍
3、onmouseover與onmousemove的區(qū)別是：當(dāng)鼠標(biāo)移過(guò)當(dāng)前對(duì)象時(shí)就產(chǎn)生了onmouseover事件,當(dāng)鼠標(biāo)在當(dāng)前對(duì)象上移動(dòng)時(shí)就產(chǎn)生了onmousemove事件，只要是在對(duì)象上移動(dòng)而且沒(méi)有移出對(duì)象的，就是onmousemove事件。我當(dāng)前就是因?yàn)檫@個(gè)onmouseover事件惹的禍要不早就搞定了。今天寫(xiě)出來(lái)讓朋友們也能注意這一點(diǎn)。
4、如果朋友們有更好的方法或有不明白的地方我們可以一起探討。
5、有需要的朋友可以直接拿去用，本人保留版權(quán)
