[原创]菜单制作学习一个小东西- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > [原创]菜单制作学习一个小东西

Javascript: javascript radio list的实现细节(多浏览器兼容); IE在DOM操作有表单控件时的bug; trim原型函数看js正则表达式的性能; js 禁用浏览器的后退功能的简单方法; IE和Firefox下javascript的兼容写法小结; 兼容ie和firefox js关闭代码; 用tip解决Ext列宽度不够的问题; firefox getyear() getFullYear数获取年份的问题; javascript iFrame研究; FLASH 广告之外的链接; firefox TBODY 用js显示和隐藏时出现错位的解决方法; Javascript 获取LI里的内容; 比较全的JS checkbox全选、取消全选、删除功能代码; JS checkbox控制操作代码; document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all; document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById; 简单通用的JS滑动门代码; Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）; js 提交和设置表单的值; flash javascript之间的通讯方法小结

No. « ‹ 120 121 122 123 › »

技术文章搜索

关键字

Javascript 中的 [原创]菜单制作学习一个小东西

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 251 ::

收藏到网摘: n/a

一个很Cool的JS菜单效果基于Web标准的UI组件 — 树状菜单(2)

提示菜单用的东西，我想学习一下，一个小东西，研究一下

点击运行可以看到效果:

<html>
<head>
<title></title>
</head>
<body>
<div id="menudiv" style="z-index:2;position:absolute;visibility:hidden;background-color:green;color:white;">大家好啊</div>
<script language="javascript">
var h,l,t,w,mX,mY,e,srcE,thediv
function showMenu(){
e=window.event?window.event:e;
srcE=e.srcElement?e.srcElement:e.target;
if(!srcE)return;
thediv=document.getElementById('menudiv')
h=srcE.offsetHeight;
w=srcE.offsetWidth;
//alert(h);
l=srcE.offsetLeft+2;
t=srcE.offsetTop+h;
thediv.style.top=t;
thediv.style.left=l;
thediv.style.visibility="visible";
isvisible=true;
}
function hideMenu(){
e=window.event?window.event:e;
srcE=e.srcElement?e.srcElement:e.target;
thediv=document.getElementById('menudiv')
if(!srcE)return;
if(isvisible==true){
mX=e.clientX+document.body.scrollLeft;
mY=e.clientY+document.body.scrollTop;
if((mX<parseInt(thediv.style.left))||(mX>parseInt(thediv.style.left)+thediv.offsetWidth)||(mY<parseInt(thediv.style.top-h))||(mY>parseInt(thediv.style.top)+thediv.offsetHeight))
{
thediv.style.visibility="hidden";
isvisible=false;
}
}
}
</script>
<a href="" onmouseover="showMenu()" onmouseout="hideMenu()">软晨学习网</a>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

一个很Cool的JS菜单效果基于Web标准的UI组件 — 树状菜单(2)

Javascript 中的 [原创]菜单制作学习一个小东西

评论 (0) All