相关文章
北京网站建设Win2K服务器装IIS及.Net
企通互联标题下的分隔线在4.0中如何设置，还有标题的行间距
网站设计在html文件引入其它html文件的几种方法
企通互联用CSS层叠样式表控制鼠标显示的样式
网页设计在Dreamweaver8中轻松插入Flash视频
北京网站设计FLASH MX 2004视频教程:《电脑报》片头制作（一）
网站建设FLASH MX 2004视频教程:机器猫动画片头制作(一)
企通互联Dreamweaver基础视频教程27 自定义网页关键字等
网页设计用户登录的实现-Dreamweaver构建Blog
企通互联导航上用CSS标志当前页效果的实现
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站建设企通互联鼠标在文本上移动时层的显示与消失
网站建设企通互联鼠标在文本上移动时层的显示与消失
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的，但是由于......(跟老板后面做事，当然空闲的时间就少了，唉，实在不好意思，因为自己不才，所以找了个借口)。刚好现在公司又让我做个房产管理系统，要用这样的一个方法了，所以才狠下心来非把这个做出来不可。我认为这个例子非常实用 www.qitongnet.com(个人看法)，而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码，有不妥之处还请各位高人指教，在此先谢了。 北京网页设计
把这里的所有代码都放在<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> 网站设计
企通互联
<table border="0" cellpadding="0" cellspacing="0" width="600"> 网站制作
<tr> 网站建设
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>发现之旅</a></td> 北京网站建设
</tr> 网站建设
<tr> 企通互联
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);> 网页设计和风景苑</a></td> 网站制作
</tr> 北京网站制作
</table> 北京网站建设
网站设计
如果有更多的文本和层的话以此类推即可。 网站制作
在这里有几点要说明的就是： 北京网站设计
北京网站设计 1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了，关于这点朋友们可以参考有关书籍 网站建设 网站制作
北京网站建设 2、onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。 北京网页设计
3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。 北京网站制作
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> 网站设计
企通互联
<table border="0" cellpadding="0" cellspacing="0" width="600"> 网站制作
<tr> 网站建设
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>发现之旅</a></td> 北京网站建设
</tr> 网站建设
<tr> 企通互联
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);> 网页设计和风景苑</a></td> 网站制作
</tr> 北京网站制作
</table> 北京网站建设
网站设计
如果有更多的文本和层的话以此类推即可。 网站制作
在这里有几点要说明的就是： 北京网站设计
北京网站设计 1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了，关于这点朋友们可以参考有关书籍 网站建设 网站制作
北京网站建设 2、onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。 北京网页设计
3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。 北京网站制作
4、有需要的朋友可以直接拿去用，本人保留版权