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代码
Apr 22 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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简单静态页生成过程
2008/03/27 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python中pyqtgraph知识点总结
2021/01/26 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
JAVA代码查错题
2014/10/10 面试题
电脑教师的自我评价
2013/12/18 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
面试后的英文感谢信
2014/02/01 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
上诉答辩状范文
2015/05/22 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
安全教育日主题班会
2015/08/13 职场文书
Python利用capstone实现反汇编
2022/04/06 Python