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上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Django框架模板介绍
2019/01/15 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python、Matlab求定积分的实现
2019/11/20 Python
如何解决python多种版本冲突问题
2020/10/13 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
WSDL的操作类型主要有几种
2013/07/19 面试题
程序员岗位职责
2013/11/11 职场文书
物流合作计划书
2014/01/10 职场文书
五四青年节演讲稿
2014/05/26 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
律师催款函范文
2015/06/24 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL