拖拽与隐藏效果的网页设计实现-CSDN博客

本文链接：https://blog.csdn.net/kayv/article/details/6745897

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>无标题 3</title>

<style type="text/css">
#bg_mask {
background-color: #CCCCCC;
width: 2000px;
height: 2000px;
top: -100px;
left: -100px;
position: absolute;
display:none;
}
#msg_box
{
position: absolute;
width:200px;
height:200px;
top:100px;
left:100px;
display:none;
border:1px black solid;
background:white;
}
</style>

<script type="text/javascript">
function showbg()
{
if (document.getElementById)
{
target=document.getElementById("bg_mask");
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
target1 = document.getElementById("msg_box");
if(target1)
{
if (target1.style.display=="block"){
target1.style.display="none";
} else {
target1.style.display="block";
target1.style.zIndex = 1000;
}
}

}

}
var oldX,oldY; // 记录鼠标移动事件发生前鼠标的位置
var dragElem; // 记录被拖曳的对象
function $(nodeId)
{
return document.getElementById(nodeId);
}
// 获得事件发生的主体
function getEventElement(evt)
{
evt=evt||event;
return evt.srcElement||evt.target;
}
// 获取结点的计算样式
function getStyle(node)
{
return node.currentStyle||document.defaultView.getComputedStyle(node, null);
}
// 拖动的动作
function drag(evt)
{
evt=evt||event; // 为了兼容IE和firefox，firefox执行evt，IE则执行evt=event
var node=dragElem;
if(node != null) //if语句是我后来加上去的
{
node.style.top=parseInt(getStyle(node).top||0)+evt.clientY-oldY+'px';
node.style.left=parseInt(getStyle(node).left||0)+evt.clientX-oldX+'px';
oldX=evt.clientX, oldY=evt.clientY;
}
}
// 拖动开始
// 注册拖曳结束时的执行函数
// 注册拖曳事件的执行函数
function drag_start(evt,nodeId)
{
evt = evt||event;
oldX = evt.clientX;
oldY = evt.clientY;
dragElem=$(nodeId);
getEventElement(evt).onmouseup=drag_end;
getEventElement(evt).onmousemove=drag;
}
// 对 drag_start 进行了改良
// 拖曳结束，释放onmousemove事件执行函数
function drag_end(evt)
{
evt = evt||event;
dragElem = null;
getEventElement(evt).onmousemove = null;
getEventElement(evt).onmouseup = null;
}</script>

</head>

<body>
<div id="bg_mask">
i am kayv
</div>
<div id="msg_box">
<h3 onmousedown="drag_start(event,'msg_box')">标题</h3>
<p>使用方法：只需在可拖动的地方加入onmousedown="drag_start(event,'block')"，"block"是被拖曳的div的id值</p>
<p>在标题栏按下鼠标可拖动div层</p>
</div>
<form method="post" action="">
<input name="Button1" type="button" value="button" onclick="showbg()"/>
</form>

</body>

</html>

研究div的弹出窗口v0