鼠标在文本上移动时层的显示与消失

显示

花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的,但是由于......(跟老板后面做事,当然空闲的时间就少了,唉,实在不好意思,因为自己不才,所以找了个借口)。刚好现在公司又让我做个房产管理系统,要用这样的一个方法了,所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法),而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码,有不妥之处还请各位高人指教,在此先谢了。

把这里的所有代码都放在<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、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
5、有需要的朋友可以直接拿去用,本人保留版权

时间: 2016-02-04

鼠标在文本上移动时层的显示与消失的相关文章

js中点击空白区域时文本框与隐藏层的显示与影藏问题_javascript技巧

当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <

html 如何实现鼠标放到图片上时显示小图片和信息(就像csdn 的本网页)

问题描述 如何实现鼠标放到图片上时显示小图片和信息(就像csdn的本网页) 解决方案 解决方案二:<imgsrc="a.jsp"alt="这是一个图片"/>解决方案三:是说书标指向用户头像出现的层么?解决方案四:<imgonmouseover="try{showUserCard(this,'b_sky2012')}catch(ex){};"alt="b_sky2012用户头像"title="b_sk

js实现鼠标悬停图片上时滚动文字说明的方法

 这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下     本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin

php-PHP中怎样实现当鼠标放在图片上时,图片放大的效果

问题描述 PHP中怎样实现当鼠标放在图片上时,图片放大的效果 我没有开发PHP的经验,现在遇到一个用PHP开发的网站,要求我把网站首页的图片效果修改成当鼠标经过时,图片放大的效果 解决方案 js控制,不是php..~其实js都不用,css控制就行 <!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD

滚动图片-怎么实现当鼠标放到图片上时图片停止滚动

问题描述 怎么实现当鼠标放到图片上时图片停止滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

js实现鼠标悬停图片上时滚动文字说明的方法_javascript技巧

本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){   if (document.all&&a

网页上鼠标画过一个图片时均匀放大的效果是怎么实现的

问题描述 网页上鼠标画过一个图片时均匀放大的效果是怎么实现的 如题,这个效果是怎么实现的呢?不是很突兀地变大,而是均匀地变大 解决方案 jquery控制一下就行 解决方案二: 鼠标放上去图片放大的一个效果(css) 解决方案三: 用DreamWeaver添加行为:增大/收缩.

效果-C# 鼠标放到菜单上时切换背景图片

问题描述 C# 鼠标放到菜单上时切换背景图片 我用C#做了一个托盘程序,给这个托盘程序添加了一个菜单ContextMenuStrip,然后给 这个ContextMenuStrip添加了了几个菜单项ToolStripMenuItem,想实现的效果是鼠标放在菜单项ToolStripMenuItem上的时候就改变它的背景图片,鼠标离开时再变回原来 的背景图片,但是每次鼠标放上去的时候,都会出现蓝色的阴影遮盖住背景图片,求大神 帮忙解决怎么去掉蓝色阴影 解决方案 需要重写渲染器(Render) 参考 h

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法_javascript技巧

多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo