首 页
┆
免费资源
┆
建站技术
┆
源码下载
┆
软件下载
┆
精品淘吧
┆
客户留言
用户登陆
|
用户注册
设为首页
加入收藏
联系我们
您当前的位置:
笃志小屋
→
建站技术
→
网页设计
→
Html&Xhtml
→ 文章内容
鼠标在文本上移动时层的显示与消失
作者:佚名 来源:不详 发布时间:2007-10-9 15:29:50
花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的,但是由于......(跟老板后面做事,当然空闲的时间就少了,唉,实在不好意思,因为自己不才,所以找了个借口)。刚好现在公司又让我做个房产管理系统,要用这样的一个方法了,所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法),而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码,有不妥之处还请各位高人指教,在此先谢了。
把这里的所有代码都放在<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、有需要的朋友可以直接拿去用,本人保留版权
2007-10-9 15:29:50免费资源duzhi.net
[ ] [
返回上一页
] [
打 印
]
【上一篇文章】:
实现网页渐入特殊效果
【下一篇文章】:
网页制作中的小秘诀
【笃志小屋duzhi.net】
技术文章导航
Photoshop
Flash
Dreamweaver
色彩原理
设计理念
Html&Xhtml
技术文章排行
08-05
·
Adobe Gamma Loader.exe - Adobe G...
07-30
·
nvsvc32.exe - nvsvc32
08-07
·
wuauclt.exe - wuauclt
08-08
·
视频直播网页播放代码avi mpg wmv ...
07-30
·
setup.exe - setup
08-30
·
[组图]
用Photoshop设计奥运五环金属...
08-06
·
zClientm.exe - zClientm
08-06
·
moviemk.exe - moviemk
07-30
·
ati2evxx.exe - ati2evxx
精彩推荐
关于本站
-
网站帮助
-
广告合作
-
下载声明
-
友情连接
-
网站地图
Copyright www.duzhi.net All Right Reserved.
设计制作:翼迅设计室 Equick Desgin Home 在线
QQ:303471038
网络备案号:
冀ICP备06008201号
站长信箱:webmaster#duzhi.net(将#换为@)
本站部分文章和图片来源于网络和内容提供伙伴,如果侵犯了您的权利,请留言告知,本站定会及时删除相关文件!