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数组组合成字符串的脚本
Jan 06 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
创建一个类Person的简单实例
May 17 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php获取域名的google收录示例
2014/03/24 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
js常用函数 不错
2006/09/08 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Angular2库初探
2017/03/01 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python求crc32值的方法
2014/10/05 Python
python简单文本处理的方法
2015/07/10 Python
全面了解python字符串和字典
2016/07/07 Python
python多进程实现文件下载传输功能
2018/07/28 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
露营世界:Camping World
2017/02/02 全球购物
六个一活动实施方案
2014/03/21 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
精神文明建设标语
2014/06/16 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
放假通知格式
2015/04/14 职场文书
卫生主题班会
2015/08/14 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
gojs实现蚂蚁线动画效果
2022/02/18 Javascript