javascript 可拖动的window窗口

最新推荐文章于 2021-07-06 20:10:35 发布

fanpeii

最新推荐文章于 2021-07-06 20:10:35 发布

阅读量586

点赞数

分类专栏： HTML 网页制作 javascript

本文链接：https://blog.csdn.net/fanpeii/article/details/8561299

版权

HTML 网页制作同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript仿可以拖动的windows窗口</title>
<style type="text/css">
<!--
.cwin {
	height: 300px;
	width: 500px;
	border: solid #CCC 1px; 
	position:relative;
	font:bold 15px Tahoma, Geneva, sans-serif;
	margin:auto; /*保持居中*/
	
}
.cwinhead {
	background:#ccc;
	height: 25px;
	width: 100%;
	position:relative;
	left:0;
	top:0;
}
.cwinbody {


}
.cwintail {
	background:#ccc;
	height:20px;
	width: 100%;
	position:absolute;
 	right:0;
	bottom:0;
}
-->
</style>
</head>

<body>
<div class="cwin" id="WindowsBody" style="left: 0px; top: 0px;">
	<div class="cwinhead" id="WinHead" >标题</div>
    <div class="cwinbody" id="WinBody">内容</div>
    <div class="cwintail" id="WinTail">状态栏</div>
</div>
<script type="text/javascript">

var posX; 
var posY; 
var fdiv = document.getElementById("WinHead"); 
var bdiv =document.getElementById("WindowsBody")
bdiv.οnmοusedοwn=function(e) 
{ 
	if(!e) e = window.event; //IE 
	posX = e.clientX - parseInt(bdiv.style.left); 
	posY = e.clientY - parseInt(bdiv.style.top); 
	document.onmousemove = mousemove; 
} 

document.onmouseup = function() 
{ 
	document.onmousemove = null;
} 
	
function mousemove(ev) 
{ 
	if(ev==null) ev = window.event;//IE 
	bdiv.style.left = (ev.clientX - posX) + "px"; 
	bdiv.style.top = (ev.clientY - posY) + "px"; 
} 

</script>
</body>
</html>