javascript 弹出div实例

本文介绍了一种使用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 > 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值