| 鼠标在文本上移动时层的显示与消失 |
|
作者：网络 文章来源：转载 点击数： 更新时间：2006-1-4  |
| [ 字体：缩小 正常 放大 | 双击自动滚屏 ] |
请选择合适的字体颜色：
|
|
花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的，但是由于......(跟老板后面做事，当然空闲的时间就少了，唉，实在不好意思，因为自己不才，所以找了个借口)。刚好现在公司又让我做个房产管理系统，要用这样的一个方法了，所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法)，而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码，有不妥之处还请各位高人指教，在此先谢了。
把这里的所有代码都放在<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">地址：园区星海街东侧<br>电话：0512-65103588-206</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(); onmousemove=showdiv();>发现之旅</a></td>
</tr>
</table>
当然了这里的功能比较简单，没有对浏览器类型进行判断，本人不才，就把这个问题留给各位了，欢迎每一位朋友来修改这个问题。
在这里还有一个问题就是如果文本不止一个、定义的层也就不止一个。如果还用这样的方法就会出错，我对这个问题研究了一下，用下面的这个方法就可以解决了。
<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">地址：园区星海街东侧<br>电话：0512-65103588-20611</div>
<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新区明星街南侧<br>电话：0512-65103588-20622</div>[1] [2] 下一页
|
|
| 文章录入：54iter 责任编辑：54iter |
上一篇文章： 通向web标准之路
下一篇文章： HTML语言剖析（七）表格标记 |
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
