javascript技巧

关注公众号 jb51net

关闭

首页 > 网络编程 > JavaScript > javascript技巧 > 浮动div

js 创建一个浮动div的代码

2009-12-26 02:50:48 作者：

js 创建一个浮动div的代码，一般用来指导用户下面的操作与多条件选择。点击一下就可显示，具体的大家可以自由发挥。

<body> 
<script> 
//关闭DIV MENU 
function MenuClose() 
{ 
var MenuDiv = document.getElementById("MenuDiv"); 
if(MenuDiv != null) 
{ 
document.body.removeChild(MenuDiv); 
} 
} 
//创建menu 
function MenuPanel(opflag,operid, left, top) 
{ 
var MenuDiv = document.getElementById("MenuDiv"); 
if(MenuDiv != null) 
{ 
document.body.removeChild(MenuDiv); 
}

var useflag = "停用帐号"; 
var flag=opflag; 
if (flag == "0") 
{ 
useflag = "停用帐号"; 
} 
else 
{ 
useflag = "激活帐号"; 
} 
MenuDiv = document.createElement("div"); 
MenuDiv.id = "MenuDiv"; 
MenuDiv.onmouseleave = function() 
{ 
MenuClose(); 
} 
MenuDiv.style.position = "absolute"; 
MenuDiv.style.setAttribute("zIndex" ,"201"); 
MenuDiv.style.setAttribute("backgroundColor" ,"#EFEFEF"); 
MenuDiv.style.setAttribute("Font" ,"10pt"); 
MenuDiv.style.setAttribute("width" ,60); 
MenuDiv.style.setAttribute("left" ,left); 
MenuDiv.style.setAttribute("top" ,top); 
MenuDiv.innerHTML = "<table width=\"100%\">" 
+"<tr><td onclick=\"javascript:RedirectUrl(1,'" + flag + "','" + operid + "');MenuClose();\" style=\"cursor:hand;height:20px;Color:blue;\" onmouseover=\"this.style.backgroundColor='#FFD76B';\" onmouseout=\"this.style.backgroundColor='#EFEFEF';\" align=\"left\" valign=\"top\">"+useflag+"</td></tr>" 
+"<tr><td onclick=\"RedirectUrl(0,0,'" + operid + "')\" style=\"cursor:hand;height:20px;Color:blue;\" onmouseover=\"this.style.backgroundColor='#FFD76B';\" onmouseout=\"this.style.backgroundColor='#EFEFEF';\" align=\"left\" valign=\"top\">修改帐号</td></tr>" 
+"<tr><td onclick=\"javascript:RedirectUrl(4,0,'" + operid + "')\" style=\"cursor:hand;height:20px;Color:blue;\" onmouseover=\"this.style.backgroundColor='#FFD76B';\" onmouseout=\"this.style.backgroundColor='#EFEFEF';\" align=\"left\" valign=\"top\">重设密码</td></tr>" 
+"<tr><td onclick=\"RedirectUrl(2,0,'" + operid + "')\" style=\"cursor:hand;height:20px;Color:blue;\" onmouseover=\"this.style.backgroundColor='#FFD76B';\" onmouseout=\"this.style.backgroundColor='#EFEFEF';\" align=\"left\" valign=\"top\">角色管理</td></tr>" 
+"<tr><td onclick=\"javascript:RedirectUrl(3,0,'" + operid + "')\" style=\"cursor:hand;height:20px;Color:blue;\" onmouseover=\"this.style.backgroundColor='#FFD76B';\" onmouseout=\"this.style.backgroundColor='#EFEFEF';\" align=\"left\" valign=\"top\">删除帐号</td></tr>" 
+"</table>"; 
document.body.appendChild(MenuDiv); 
} 
//获取控件的高度和宽度 
function getAbsolutePos(e) 
{ 
var t=e.offsetTop; 
var l=e.offsetLeft; 
while(e=e.offsetParent) 
{ 
t+=e.offsetTop; 
l+=e.offsetLeft; 
}

var pos = { x: l, y: t }; 
return pos; 
} 
</script> 
<div id="jb51net" onclick="MenuPanel()">脚本之家代码测试(点击选择)</div> 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章: