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

2016-01-29 11:51 51 1 收藏

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

【 tulaoshi.com - Html 】

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

来源:http://www.tulaoshi.com/n/20160129/1483612.html

延伸阅读
在工具栏按钮上添加文本标签 作者:赵新国 一、前 言 对于 工具栏 ,我想大家一定不陌生,它直观,使用方便,它给应用程序的用户带来极大的方便.对VC++程序员来说,为自己开发的软件加上一个工具栏并不难,几乎每本介绍VC++的书都少不了介绍这方面的内容,并且,如果在开发初期就想加入工具...
标签: 电脑入门
无论是Word2003、Word2007还是最新的版本的Word2010,通过拖动的方式移动或复制文本的功能始终被保留下来。在Word2010中复制文本的步骤如下所述: 第1步,打开Word2010文档窗口,选中需要移动或复制的文本内容,如图1所示。 图1 选中文本内容第2步,将鼠标指针指向被选中的文本区域,按住左键拖动文本到目标位置,如图2所示。 电脑教...
本文介绍如何限制鼠标在窗口的指定范围内移动。这个技术在需要防止用户鼠标在指定区域内活动时非常 有用。例如在一个射击游戏中,需要限制鼠标在射击区内移动。 操作步骤 1、建立一个新工程项目,缺省建立窗体FORM1 2、添加一个新模体 3、粘贴下面代码到新模体 Option ExplicitDeclare Function ClipCursor ...
标签: Web开发
鼠标感应伸缩隐藏层,实际上我没完全理解这个例子,但是相信以后会用的到,所以先把code贴上来,未来我要去理解的两个参数方法setInterval() ,clearInterval(),目前还不是很清楚这两个的用法 。如果有谁会欢迎留言解答,不胜感激。   !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww...
标签: PS PS教程
看看调整图层的图标怎么会变成这样,那就先看看下面的四张图。 然后我再来解释 虽然图的内容都差不多,不过有没有注意到由于图像的宽度不同,而使得图像在创建调整图层后,调整图层的图标发生了变化。 第1张图的比例是 1:1 第2张图的比例是 4:3 第3张图的比例是 8:5 第4张图的比例是 10...

经验教程

924

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部