javascript 弹出菜单定位，兼容firefox和ie6/ie7 - 飞扬部落编程仓库-专注编程,网站,专业技术

showmenu.js文件代码如下：

var menuTimer =null;
function showmenu(obj1,obj2,state,location){
    var btn=document.getElementById(obj1);
    var obj=document.getElementById(obj2);
    var h=btn.offsetHeight;
    var w=btn.offsetWidth;
    var x=btn.offsetLeft;
    var y=btn.offsetTop;

    obj.onmouseover =function(){
        showmenu(obj1,obj2,'show',location);
    }
    obj.onmouseout =function(){
        showmenu(obj1,obj2,'hide',location);
    }

    while(btn=btn.offsetParent){y+=btn.offsetTop;x+=btn.offsetLeft;}

    var hh=obj.offsetHeight;
    var ww=obj.offsetWidth;
    var xx=obj.offsetLeft;//style.left;
    var yy=obj.offsetTop;//style.top;
    var obj2state=state.toLowerCase();
    var obj2location=location.toLowerCase();

    var showx,showy;

    if(obj2location=="left" || obj2location=="l" || obj2location=="top" || obj2location=="t" || obj2location=="u" || obj2location=="b" || obj2location=="r" || obj2location=="up" || obj2location=="right" || obj2location=="bottom"){
        if(obj2location=="left" || obj2location=="l"){showx=x-ww;showy=y;}
        if(obj2location=="top" || obj2location=="t" || obj2location=="u"){showx=x;showy=y-hh;}
        if(obj2location=="right" || obj2location=="r"){showx=x+w;showy=y;}
        if(obj2location=="bottom" || obj2location=="b"){showx=x;showy=y+h;}
    }else{
        showx=xx;showy=yy;
    }
    obj.style.left=showx+"px";
    obj.style.top=showy+"px";
    if(state =="hide"){
        menuTimer =setTimeout("hiddenmenu('"+ obj2 +"')", 500);
    }else{
        clearTimeout(menuTimer);
        obj.style.visibility ="visible";
    }
}
function hiddenmenu(psObjId){
    document.getElementById(psObjId).style.visibility ="hidden";
}

测试调用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试</title>
<script language="javascript" type="text/javascript" src="js/showmenu.js"></script>
<style>
#mdiv{
 position: absolute;
 border: 1px solid #92B7E5;
 top: 0px;
 left: 0px;
 width: 150px;
 height: 170px;
 background-color: #FFFFFF;
 visibility: hidden;
 padding: 5px;
 overflow: hidden;
}
</style>
</head>
<body>
<p>调用：</p>
<p>showmenu(thisobjid,menuobjid,state,position) </p>
<p>thisobjid =控件本身id</p>
<p>menuobjid =弹出菜单层的id</p>
<p>state 有两个值可选，show即显示菜单 hidden即隐藏菜单</p>
<p>position 有四个值可选，top菜单显示于顶部 bottom菜单显示于底部 left菜单显示于左侧&nbsp; right菜单显示于右侧</p>
<p>&nbsp;</p>
<p>

  <a href="" id="m1" onMouseOver="showmenu('m1','mdiv','show','bottom')" onMouseOut="showmenu('m1','mdiv','hide','bottom')" style="cursor: pointer;">鼠标移到这里来看看</a>
  
<div id="mdiv">
<script language="javascript" type="text/javascript">菜单内容。。。</div>

</body>
</html>



这个代码是从网上抄来的，自己改进了一下，

原作者是谁我是真不知道了，因为我抄来的时候也是人家转帖的，

主要是因为这段代码兼容性不错，而且代码简练，这正是我需要的，

因为我需要其他功能可以自己随便往上面加，多方便哪。

特帖上来与大家共享。

from http://hi.baidu.com/heirui/blog/item/7295b17e6c478c3b0dd7da36.html

Tags: javascript

原创文章如转载，请注明：转载自：飞扬部落编程仓库 : http://www.busfly.net/csdn/

本文链接地址：http://www.busfly.net/csdn/post/javascript-menu-firefox-ie6-ie7.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~