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

Js拖动效果（例4）

2010-05-21 12:39 85 查看

<!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>
<mce: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;}
--></mce:style><style type="text/css" mce_bogus="1">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>
<mce: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;
}
}
// --></mce: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>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/jom_ch/archive/2007/04/16/1566631.aspx

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

标签：

相关文章推荐

新的分享

章节导航