[其他] 【JavaScript】js点击打开按钮，显示windows关机效果

9 主题	0 好友	164 积分

注册会员

Rank: 2

性别: 保密

发消息

电梯直达

楼主

发表于 2012-11-8 17:59:09 |只看该作者 |倒序浏览

本帖最后由 sky_yx 于 2015-12-30 14:10 编辑

新建一个html页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function openWin()
{
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;

var newWidth = 300;
var newHeight = 200;

var bgDiv = document.createElement("div");
bgDiv.style.cssText = "position:absolute;top:0px;left:0px;background-color:#333333;z-index:1;width:"+iWidth + "px;height:"+iHeight+"px;filter:Alpha(Opacity=30)";
document.body.appendChild(bgDiv);

var newDiv = document.createElement("div");
newDiv.style.cssText = "position:absolute;margin:0px;z-index:2;top:"+(iHeight - newHeight)/2 + "px;left:"+ (iWidth - newWidth)/2 + "px;width:"+newWidth + "px;height:"+newHeight+"px;background-color:#ffffff;border:1px solid #ffeeff;";
document.body.appendChild(newDiv);

var table = document.createElement("table");
newDiv.appendChild(table);
table.style.cssText = "margin:0px;border:none;font-size:13px;color:#ffffff;width:100%;";
table.cellSpacing = "0";
var tr = table.insertRow(0);
tr.style.cssText = "cursor:move;height:22px;margin:0px;background-color:#666666;";
var titleBar = tr.insertCell(0);
titleBar.style.cssText = "padding-left:5px;";
titleBar.innerHTML = "标题";
var closeBar = tr.insertCell(1);
closeBar.style.cssText = "width:1%;cursor:pointer;text-align:right;";
closeBar.innerHTML = "X";
closeBar.onclick = function()
{
document.body.removeChild(bgDiv);
document.body.removeChild(newDiv);
}

var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var flag = false;

tr.onmousedown = function()
{
var e = window.event;
flag = true;
moveX = e.clientX;
moveY = e.clientY;
moveTop = parseInt(newDiv.style.top);
moveLeft = parseInt(newDiv.style.left);

document.onmousemove = function()
{
if(flag)
{
var e = window.event;
var x = moveLeft + e.clientX - moveX;
var y = moveTop + e.clientY - moveY;
if(x > 0 && (x + newWidth < iWidth) && y > 0 && (y + newHeight < iHeight))
{
newDiv.style.left = x + "px";
newDiv.style.top = y + "px";
}
}
}

document.onmouseup = function()
{
if(flag)
{
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
flag = false;
}

}
}

var mes = table.insertRow(table.rows.length);
var mestd = mes.insertCell(0);
mestd.style.cssText = "color:red;text-align:center;";
mestd.innerHTML = "姓名：<input type = 'text'/><br>密码：<input type = 'text'/><br><input type = 'submit' value = '提交'>";
}

</script>
<style type="text/css">
</style>

</head>
<body>
<input type="button" value="打开" onclick="openWin()"/>
</body>
</html>