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代码片段收集
Jul 12 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
javascript canvas API内容整理
Feb 16 Javascript
微信小程序自定义胶囊样式
Dec 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php接口技术实例详解
2016/12/07 PHP
JS查看对象功能代码
2008/04/25 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
学雷锋活动简报
2015/07/20 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2016高考寄语集锦
2015/12/04 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
创业计划书之甜品店
2019/09/18 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
详解MySQL的半同步
2021/04/22 MySQL
Win11开始菜单添加休眠选项
2022/04/19 数码科技