页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容菜单制作学习一个小东西[原创]

菜单制作学习一个小东西原创

发布：dxy 字体：[增加减小] 类型：原创

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

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

Tags：菜单制作学习一个小东西

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：用javascript动态注释掉HTML代码
下一篇文章：javascript同步Import,同步调用外部js的方法

·在百度中搜索关于“菜单制作学习一个小东西”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

菜单制作学习一个小东西原创

文章评论

同类文章

最近更新

热点排行

菜单制作学习一个小东西 原创

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

菜单制作学习一个小东西原创

同类文章

最近更新

热点排行