遮罩层效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>��</title>
<style type="text/css">
<!--
html
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#dt_3
{
cursor: pointer;
}
div#mbDIV
{
position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #AAAAAA;z-index: 10;
filter: alpha(opacity=80);opacity:0.8;
}
div#loginDIV
{position: absolute;width: 300px;height: 150px;background-color: #FFFF00;z-index: 20;
}
div#loginTopDIV
{width: 100%;height: 20px;background-color: #FF0000;cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
function show(ele)
{
eval(ele + ".style.display = ''");
}
function hidden(ele)
{
eval(ele + ".style.display = 'none'");
}
//-->
</script>
</head>
<body>
<div style="overflow: hidden;">
<h3>���� --> 03����-��</h3>
<p id="dt_1">01����-��</p>
<p id="dt_2">02����-��</p>
<p id="dt_3">03����-��</p>
<p id="dt_4">04����-��</p>
<p id="dt_5">05����-��</p>
<p id="dt_6">06����-��</p>
<p id="dt_7">07����-��</p>
<p id="dt_8">08����-��</p>
<p id="dt_9">09����-��</p>
<p id="dt_10">10����-��</p>
<p id="dt_11">11����-��</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 200px;left: 300px;display: none;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">��½����������Ŷ</p>
<form action="#" method="get" style="text-align: center;">
<input type="button" value="ȷ��" id="button_1" /> <input type="button" value="ȡ��" id="button_2" />
</form>
</div>
<script type="text/javascript">
<!--
/**
* */
for(var i=1;i<=11;i++)
{
eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
}
var mbDIV = document.getElementById("mbDIV");
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
document.getElementById("button_1").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
document.getElementById("button_2").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
dt_3.onclick = function()
{
loginDIV.style.top = "200px";
loginDIV.style.left = "300px";
show("loginDIV");
show("mbDIV")
}
/**
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
top = top < 0 ? 0 : top;
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
left = left < 0 ? 0 : left;
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}
//-->
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>��</title>
<style type="text/css">
<!--
html
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#dt_3
{
cursor: pointer;
}
div#mbDIV
{
position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #AAAAAA;z-index: 10;
filter: alpha(opacity=80);opacity:0.8;
}
div#loginDIV
{position: absolute;width: 300px;height: 150px;background-color: #FFFF00;z-index: 20;
}
div#loginTopDIV
{width: 100%;height: 20px;background-color: #FF0000;cursor: move;
}
-->
</style>
<script type="text/javascript">
<!--
function show(ele)
{
eval(ele + ".style.display = ''");
}
function hidden(ele)
{
eval(ele + ".style.display = 'none'");
}
//-->
</script>
</head>
<body>
<div style="overflow: hidden;">
<h3>���� --> 03����-��</h3>
<p id="dt_1">01����-��</p>
<p id="dt_2">02����-��</p>
<p id="dt_3">03����-��</p>
<p id="dt_4">04����-��</p>
<p id="dt_5">05����-��</p>
<p id="dt_6">06����-��</p>
<p id="dt_7">07����-��</p>
<p id="dt_8">08����-��</p>
<p id="dt_9">09����-��</p>
<p id="dt_10">10����-��</p>
<p id="dt_11">11����-��</p>
</div>
<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 200px;left: 300px;display: none;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">��½����������Ŷ</p>
<form action="#" method="get" style="text-align: center;">
<input type="button" value="ȷ��" id="button_1" /> <input type="button" value="ȡ��" id="button_2" />
</form>
</div>
<script type="text/javascript">
<!--
/**
* */
for(var i=1;i<=11;i++)
{
eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");
}
var mbDIV = document.getElementById("mbDIV");
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
document.getElementById("button_1").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
document.getElementById("button_2").onclick = function()
{
hidden("loginDIV");
hidden("mbDIV");
}
dt_3.onclick = function()
{
loginDIV.style.top = "200px";
loginDIV.style.left = "300px";
show("loginDIV");
show("mbDIV")
}
/**
* */
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
top = top < 0 ? 0 : top;
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
left = left < 0 ? 0 : left;
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}
//-->
</script>
</body>
</html>
