编程 Javascript

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来定位

Feb 20 Javascript

jQuery中的常用事件总结

Dec 27 Javascript

ajax java 实现自动完成功能

Dec 19 Javascript

调试代码导致IE出错的避免方法

Apr 04 Javascript

图片放大镜jquery.jqzoom.js使用实例附放大镜图标

Jun 19 Javascript

js实现交换运动效果的方法

Apr 10 Javascript

基于Css3和JQuery实现打字机效果

Aug 11 Javascript

JavaScript下拉菜单功能实例代码

Mar 01 Javascript

Vue中控制v-for循环次数的实现方法

Sep 26 Javascript

vue自定义指令限制输入框输入值的步骤与完整代码

Aug 30 Javascript

JavaScript实现移动端拖动元素

Nov 24 Javascript

教你部署vue项目到docker

Apr 05 Vue.js

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