您的位置：首页 > Web前端 > JavaScript

js简单窗口拖动

2007-04-16 15:26 267 查看

预览地址:预览



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<TITLE>blogch.cn自娱自乐简单窗口拖动Version1.0</TITLE>

<style type="text/css">

div ul li{list-style-type:none;}

#div0{position:absolute;width:300px;height:300px;margin-left:300px;margin-top:300px;z-index:1;border:1px solid blue;background-color:#99CCFF;}

#div0 #div00{width:300px;height:25px;border-bottom:1px solid blue;background-color:#00CC66;cursor:move;}

.divMess{width:300px;height:40px;border:1px solid blue;text-align:center;margin:2px 0px 0px;display:block;}

</style>

<script type="text/javascript">

var nowMoveObj = null;

var relLeft;

var relTop;

function $I(d){return document.getElementById(d);}

function showMousePosition(){

$I("div1").innerHTML = "Mouse-position-X:"+window.event.x+"<br>Mouse-position-Y:"+window.event.y;

}

function mouseDown(obj){

nowMoveObj = obj;

obj.style.posotion = "absolute";

$I("div2").innerHTML = "window-position-X:"+nowMoveObj.style.pixelLeft+"<br>window-position-Y:"+nowMoveObj.style.pixelTop;

relLeft = event.x - nowMoveObj.style.pixelLeft;

relTop = event.y - nowMoveObj.style.pixelTop;

$I("div3").innerHTML = "relative-position-X:"+relLeft+"<br>relative-position-Y:"+relTop;

}

window.document.onmouseup = function(){nowMoveObj = null;}

function mouseMove(obj){

if(nowMoveObj != null){

nowMoveObj.style.pixelLeft = event.x-relLeft;

nowMoveObj.style.pixelTop = event.y-relTop;

}

}

</script>

</HEAD>

<BODY onMouseMove="showMousePosition()">

<div id="div0" onMouseDown = "mouseDown(this)" onMouseMove = "mouseMove(this)">

<div id="div00">拖动窗口</div>

<div id="div01">

<ul>

<li>CHINA</li>

<li>AMERICA</li>

</ul>

</div>

</div>

<div id="div1" class="divMess"></div>

<div id="div2" class="divMess"></div>

<div id="div3" class="divMess"></div>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航