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 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
详解php协程知识点
2018/09/21 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python中logging包的使用总结
2018/02/28 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python递归法解决棋盘分割问题
2019/07/17 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
优秀班干部事迹材料
2014/01/26 职场文书
企业宣传口号
2014/06/12 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
团员个人总结
2015/02/26 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
校运会加油稿大全
2015/07/22 职场文书