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特效
Aug 13 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
JSON格式化输出
Nov 10 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
详解webpack 多入口配置
Jun 16 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 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设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JavaScript触发器详解
2007/03/10 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python文本数据相似度的度量
2018/03/12 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
详解python和matlab的优势与区别
2019/06/28 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
有关打架的检讨书
2014/01/25 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
网络研修随笔感言
2015/11/18 职场文书
新课程改革心得体会
2016/01/22 职场文书
施工安全协议书
2016/03/22 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书
会议主持词通用版
2019/04/02 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书