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 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
js实现图片360度旋转
Jan 22 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
如何根据业务封装自己的功能组件
Apr 19 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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程序--记数器
2006/10/09 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
css3学习心得分享
2013/08/19 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
社区国庆节活动方案
2014/02/05 职场文书
讲座主持词
2014/03/20 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
公司租房协议书范本
2014/10/08 职场文书
营销计划书范文
2015/01/17 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书