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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
js实现div色块碰撞
Jan 16 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PDO::errorInfo讲解
2019/01/28 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
简单谈谈json跨域
2016/03/13 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
Python操作串口的方法
2015/06/17 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python实现视频下载功能
2017/03/14 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
英国网上花店:Bunches
2016/11/29 全球购物
高中生自我评语大全
2014/01/19 职场文书
情侣吵架检讨书
2014/02/05 职场文书
十佳护士先进事迹
2014/05/08 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
重阳节主题班会
2015/08/17 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python