您的位置：首页 > Web前端 > JavaScript

javascript 弹出div实例

2007-10-19 17:37 423 查看

<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 >

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航