代码改变世界

移动层

2007-01-31 21:57  shaofeng  阅读(170)  评论(0)    收藏  举报
<!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>无标题文档</title>
<script language="javascript">
var pageX=1,pageY=1;
function funDown()
{
    var obj = document.getElementById("layers2");
    obj.style.cursor="move";
    pageY=obj.offsetTop;
    pageX=obj.offsetLeft;
    pageX=event.x-obj.offsetLeft;
    pageY=event.y-obj.offsetTop;
    obj.innerHTML="x:"+event.x+"y:"+event.y;
    obj.onmousemove=funMove;
    obj.onmouseup=funUp;
}

function funMove()
{
        var obj = document.getElementById("layers2");
        obj.InnerHTML="x is:"+pageX+"<br />y is:"+pageY;
        obj.style.left=(event.x-pageX)+"px";
        obj.style.top=(event.y-pageY)+"px";
}

function funUp()
{
    var obj = document.getElementById("layers2");
    obj.style.cursor="default";
    obj.onmousemove=null;
}
</script>
</head>

<body>
</script>
<div id="layers2" onMouseDown="funDown()" style=" background-color:#006699; position:absolute; height:200px; width:200px; top:20px; left:20px;">
aaa
</div>
</body>
</html>

自己刚写的一个移动层，够简单了吧？~~~~
希望大家能学到点什么~~