div层拖动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>拖动层-DHTML技术</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isCatchDiv = false;
var dragX = 0;
var dragY = 0;
function loadDiv(){
divMove.style.top=document.body.scrollTop;
divMove.style.left=document.body.scrollLeft;
}
function hideDiv(){
divMove.style.visibility = "hidden";
}
function showDiv(){
loadDiv();
divMove.style.visibility = "visible";
}
function catchDiv(){
isCatchDiv = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragX=x-divMove.style.pixelLeft;
dragY=y-divMove.style.pixelTop;
divMove.setCapture();
document.onmousemove = moveDiv;
}
function releaseDiv(){
isCatchDiv = false;
divMove.releaseCapture();
document.onmousemove = null;
}
function moveDiv(){
if(isCatchDiv){
divMove.style.left = event.x+document.body.scrollLeft-dragX;
divMove.style.top = event.y+document.body.scrollTop-dragY;
}
}
window.onload = showDiv;
//-->
</SCRIPT>
<style type="text/css">
body{
font-size:12px;
font:Arial, Helvetica, sans-serif;
}
body a,a:link,a:visited {color:#000000;text-decoration:none}
#divMove{
position:absolute;
width:300px;
height:200px;
background-color:#E1F0FF;
}
</style>
</head>

<body>
<div id="divMove" style="cursor:move;" onMouseDown="catchDiv()" onMouseUp="releaseDiv()">
<a href="http://hi.baidu.com/ycosxhack">余弦函数</a>
</div>
</body>
</html>

posted on 2010-03-31 14:00  不悔的青春  阅读(890)  评论(0)  编辑  收藏  举报

导航