javascript 弹出div实例-优快云博客

本文链接：https://blog.youkuaiyun.com/CutBug/article/details/1833220

本文介绍了一种使用HTML和JavaScript创建动态菜单的方法。通过简单的按钮点击事件触发菜单显示，并利用DOM操作来动态生成菜单项。文章详细展示了如何通过JavaScript获取元素位置信息，以及如何根据这些信息调整菜单的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html >

<head >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title > </title >
<style type="text/css">
.menuClass
{
    background-color:gray;
    filter:alpha(opacity=50);
    margin-top:-2;
    width:98px;
    position:absolute;
}

.menuMouseOver
{
    background-color:green;
    filter:alpha(opacity=50);
    width:98px;
}

.menuMouseOut
{
    background-color:gray;
    filter:alpha(opacity=50);
    width:98px;
}
</style>
</head >

<body >
<table>
    <tr>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td></td>
    </tr>
    <tr>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
        <td> <input type="button" style="width:100px" value="dropButtom" onclick="showDrop(getInfo(this))"/></td>
    </tr>
</table>

</body >
</html >

<script language="javascript" type="text/javascript" >

var menu = [ //菜单项数据
    {"url":"1.htm",
    "text":"menu1"
    },
    {"url":"2.htm",
    "text":"menu2"
    },
    {"url":"3.htm",
    "text":"menu2"
    }
];

function getInfo(o){//取得坐标
            var to=new Object();
            to.left=to.right=to.top=to.bottom=0;
            var twidth=o.offsetWidth;
            var theight=o.offsetHeight;
            while(o!=document.body){
                to.left+=o.offsetLeft;
                to.top+=o.offsetTop;
                o=o.offsetParent;
            }
            to.right=to.left+twidth;
            to.bottom=to.top+theight;
            return to;
        }
function showDrop(o){ //弹出下拉框

      var div = document.createElement("div");
      div.style.top = o.bottom;
      div.style.left = o.left;
      var strHTML = "";

      div.className = "menuClass";//层样式
      document.body.appendChild(div);
      //添加菜单项
      for(var i=0;i<menu.length;i++)
      {
            var s = "<span onmouseover=/"this.className='menuMouseOver'/" onmouseout=/"this.className='menuMouseOut'/" onclick=/"menuClick(this,'"+ menu[i].url +"')/">"+menu[i].text+"</span>";
            i!=menu.length?strHTML+=s+"<br>":strHTML+=s;

      }
      div.innerHTML = strHTML;
}

function menuClick(obj,url){ //菜单项单击事件
    obj.parentNode.parentNode.removeChild(obj.parentNode);
    alert(url);
}
</script >