数据读取中...
 您当前位置:惠州维修 -> 网络-> asp技术交流 文章搜索:  
鼠标在文本上移动时层的显示与消失
作者:转载 来源:惠州维修
日期: 2004-10-6
放大字体显示 缩小字体显示 打印文章 推荐给朋友
      花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的,但是由于......(跟老板后面做事,当然空闲的时间就少了,唉,实在不好意思,因为自己不才,所以找了个借口)。刚好现在公司又让我做个房产管理系统,要用这样的一个方法了,所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法),而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码,有不妥之处还请各位高人指教,在此先谢了。 


把这里的所有代码都放在<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=""就不适用了,关于这点朋友们可以参考有关书籍 
3、onmouseover与onmousemove的区别是:当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。 
4、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。 
文章页数:[1] 
帮助你我他: 1.我有问题请教 2.我要投稿>>>
更多相关资料搜索:
热点文章
最新文章
相关文章
版权申明:除部分特别声明不要转载,或者授权本站独家播发的文章外,大家可以自由转载本站的原创文章,但原作者和来自本站的链接必须保留(非本站原创的,按照原来自一节,自行链接)。文章版权归本站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去本站水印。
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
发表评论  打印  刷新  推荐给朋友  返回顶部  关闭

网上大名: