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表单验证代码(包括例子)
Nov 11 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
JS Attribute属性操作详解
May 19 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
LINUX下线程,GDI类的解释
2012/04/17 面试题
sort命令的作用和用法
2013/08/25 面试题
工作人员思想汇报
2014/01/09 职场文书
产品促销活动策划书
2014/01/15 职场文书
高中自我评价范文
2014/01/27 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
大学四年个人总结
2015/03/03 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
windows server2008 开启端口的实现方法
2022/06/25 Servers