javascript轻松实现当鼠标移开时已弹出子菜单自动消失


Posted in Javascript onDecember 29, 2013
<html> 
<head> 
<style type="text/css"> 
.menu 
{ 
background-color:green; 
width:120; 
height:20; 
color: white; 
text-align: center; 
font-size:9pt; 
font-weight:bolder; 
} 
.submenu 
{ 
position:absolute; 
top:40; 
background-color: 
yellow;width:180; 
font-size:9pt; 
} 
</style> 
</head> <body> 
<SCRIPT> 
var cm=null; 
document.onclick = new Function("show(null)") 
function getPos(el,sprop) 
{var iPos = 0 
while (el!=null) 
{iPos+=el["offset" + sprop] 
el = el.offsetParent} 
return iPos} 
function show(el,m) 
{if (m) { m.style.display=''; 
m.style.pixelLeft = getPos(el,"Left") 
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight} 
if ((m!=cm) && (cm)) cm.style.display='none';cm=m} 
</SCRIPT> 
<table border=0> 
<tr> 
<td ID="d1" onmouseover="show(this,ds1);" class="menu">杂志技术站点</td> 
<td ID="d2" onmouseover="show(this,ds2);" class="menu">门户站点</td> 
<td ID="d3" onmouseover="show(this,ds3);" class="menu">个人收藏站点</td> 
</tr> 
</table> 
<DIV ID="ds1" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://www.yesky.com">天极网 Yesky.com</A> 
<BR><A HREF="http://www.cbinews.com">电脑商情报</A> 
<BR><A HREF="http://www.newsoft.com.cn">新潮电子</A> 
<BR> 
</DIV> 
<DIV ID="ds2" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://www.sina.com.cn">新浪网 Sina</A> 
<BR><A HREF="http://www.sohu.com.cn">搜狐 Sohu</A> 
<BR><A HREF="http://www.163.com">网易 Netease</A> 
<BR> 
</DIV> 
<DIV ID="ds3" CLASS="submenu" STYLE="display:none" onmouseleave="this.style.display='none'"> 
<BR><A HREF="http://haoel.yeah.net">耗子网络编程站</A> 
<BR><A HREF="http://www.5460.net">中国同学录</A> 
<BR><A HREF="http://www.csdn.net">中国软件开发网</A> 
<BR> 
</DIV> 
</body> 
</html>
Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
推荐dojo学习笔记
Mar 24 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 #Javascript
js动态调用css属性的小规律及实例说明
Dec 28 #Javascript
JQuery的$命名冲突详细解析
Dec 28 #Javascript
js中call与apply的用法小结
Dec 28 #Javascript
SinaEditor使用方法详解
Dec 28 #Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 #Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 #Javascript
You might like
如何使用脚本模仿登陆过程
2006/11/22 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
JavaScript字符串对象
2017/01/14 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python数据处理实战(必看篇)
2017/06/11 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python re模块的高级用法详解
2018/06/06 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python numpy存取文件的方式
2020/04/01 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python 操作 MySQL数据库
2020/09/18 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
公司经理聘任书
2014/03/29 职场文书
微观世界观后感
2015/06/10 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
flex弹性布局详解
2022/03/20 HTML / CSS