javascript轻松实现当鼠标移开时已弹出子菜单自动消失
JavaScript自动 实现 轻松 菜单 消失 当鼠标
2023-06-13 09:15:14 时间
<html>
<head>
<styletype="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>
varcm=null;
document.onclick=newFunction("show(null)")
functiongetPos(el,sprop)
{variPos=0
while(el!=null)
{iPos+=el["offset"+sprop]
el=el.offsetParent}
returniPos}
functionshow(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>
<tableborder=0>
<tr>
<tdID="d1"onmouseover="show(this,ds1);"class="menu">杂志技术站点</td>
<tdID="d2"onmouseover="show(this,ds2);"class="menu">门户站点</td>
<tdID="d3"onmouseover="show(this,ds3);"class="menu">个人收藏站点</td>
</tr>
</table>
<DIVID="ds1"CLASS="submenu"STYLE="display:none"onmouseleave="this.style.display="none"">
<BR><AHREF="http://www.yesky.com">天极网Yesky.com</A>
<BR><AHREF="http://www.cbinews.com">电脑商情报</A>
<BR><AHREF="http://www.newsoft.com.cn">新潮电子</A>
<BR>
</DIV>
<DIVID="ds2"CLASS="submenu"STYLE="display:none"onmouseleave="this.style.display="none"">
<BR><AHREF="http://www.sina.com.cn">新浪网Sina</A>
<BR><AHREF="http://www.sohu.com.cn">搜狐Sohu</A>
<BR><AHREF="http://www.163.com">网易Netease</A>
<BR>
</DIV>
<DIVID="ds3"CLASS="submenu"STYLE="display:none"onmouseleave="this.style.display="none"">
<BR><AHREF="http://haoel.yeah.net">耗子网络编程站</A>
<BR><AHREF="http://www.5460.net">中国同学录</A>
<BR><AHREF="http://www.csdn.net">中国软件开发网</A>
<BR>
</DIV>
</body>
</html>
相关文章
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JavaScript案例:按键输入内容,模拟自动大字号
- 自动加载jQuery的Javascript代码示例
- 用javascript分类刷leetcode4.贪心(图文视频讲解)
- JavaScript专项算法题(2):函数式编程
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
- JavaScript在复制粘贴网页内容时自动添加出处详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- javascript中元素的scrollLeft和scrollTop属性说明详解编程语言
- javascript读取xml
- javascript一个自定义长度的文本自动换行的函数
- javascript之文本框输入四个数字自动加空格的脚本
- Javascript与flash交互通信基础教程
- ASP、PHP与javascript根据时段自动切换CSS皮肤的代码
- javascript自动转到命名锚记
- javascript具名函数的四种调用方式推荐
- javascript定时自动切换的选项卡Tab
- javascript自动标记来自搜索结果页的关键字
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript实现带自动提示的文本框效果代码
- javascript时间自动刷新实现原理与步骤
- JavaScript中为什么null==0为false而null大于=0为true(个人研究)
- Javascript函数parseInt()转换时出现bug问题
- Javascript基础教程之JavaScript语法