完美的javascript模态窗口拖动、拖放大小

最新推荐文章于 2019-12-04 17:24:44 发布

白云v城主

最新推荐文章于 2019-12-04 17:24:44 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/sinat_36765345/article/details/82921278

版权

	<!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=gb2312" />
	<title>完美的javascript模态窗口拖动、拖放大小</title>
	<style>
	*{margin:0;padding:0;}
	#zhezhao{
	width:100%;
	height:100%;
	background:#f00;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:9999;
	position:absolute;
	top:0;
	left:0;
	display:none;
	}
	#div2{
	width:200px;
	height:200px;
	position:relative;
	background:#EEEEEE;
	border:1px solid #f00;
	}
	#div1{
	width:15px;
	height:15px;
	background:#99CC00;
	position:absolute;
	right:0px;
	bottom:0px;
	cursor:nw-resize;
	overflow:hidden;
	font-size:12px;
	text-align:center;
	line-height:15px;
	color:#FFFFFF;
	float:right;
	z-index:3;
	}
	#right{
	width:15px;
	height:100%;
	background:#f00;
	float:right;
	position:absolute;
	right:0;
	top:0;
	cursor:e-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
	}
	#bottom{
	width:100%;
	height:15px;
	background:#f00;
	position:absolute;
	left:0;
	bottom:0;
	cursor:n-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
	}
	#div2 p{
	padding:10px;
	line-height:24px;
	font-size:13px;
	text-indent:24px;
	color:#996600;
	}
	#div2 h2{
	width:100%;
	height:25px;
	line-height:25px;
	font-size:14px;
	background:#CC9900;
	color:#FFFFFF;
	text-indent:15px;
	cursor:move;
	overflow:hidden;
	}
	</style>
	<script type="text/javascript">
	window.οnlοad=function()
	{
	var oDiv=document.getElementById("div1");
	var oDiv2=document.getElementById("div2");
	var zhezhao=document.getElementById("zhezhao");
	var h2=oDiv2.getElementsByTagName("h2")[0];
	var right=document.getElementById("right");
	var bottom=document.getElementById("bottom");
	var mouseStart={};
	var divStart={};
	var rightStart={};
	var bottomStart={};
	//往右拽
	right.οnmοusedοwn=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	rightStart.x=right.offsetLeft;
	if(right.setCapture)
	{
	right.οnmοusemοve=doDrag1;
	right.οnmοuseup=stopDrag1;
	right.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag1,true);
	document.addEventListener("mouseup",stopDrag1,true);
	}
	};
	function doDrag1(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+rightStart.x;
	var w=l+oDiv.offsetWidth;
	if(w<oDiv.offsetWidth)
	{
	w=oDiv.offsetWidth;
	}
	else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
	{
	w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
	}
	oDiv2.style.width=w+"px";
	};
	function stopDrag1()
	{
	if(right.releaseCapture)
	{
	right.οnmοusemοve=null;
	right.οnmοuseup=null;
	right.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag1,true);
	document.removeEventListener("mouseup",stopDrag1,true);
	}
	};
	//往下拽
	bottom.οnmοusedοwn=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	bottomStart.y=bottom.offsetTop;
	if(bottom.setCapture)
	{
	bottom.οnmοusemοve=doDrag2;
	bottom.οnmοuseup=stopDrag2;
	bottom.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag2,true);
	document.addEventListener("mouseup",stopDrag2,true);
	}
	};
	function doDrag2(ev)
	{
	var oEvent=ev\|\|event;
	var t=oEvent.clientY-mouseStart.y+bottomStart.y;
	var h=t+oDiv.offsetHeight;
	if(h<oDiv.offsetHeight)
	{
	h=oDiv.offsetHeight;
	}
	else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
	{
	h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
	}
	oDiv2.style.height=h+"px";
	};
	function stopDrag2()
	{
	if(bottom.releaseCapture)
	{
	bottom.οnmοusemοve=null;
	bottom.οnmοuseup=null;
	bottom.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag2,true);
	document.removeEventListener("mouseup",stopDrag2,true);
	}
	};
	//往左右同时拽
	oDiv.οnmοusedοwn=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	divStart.x=oDiv.offsetLeft;
	divStart.y=oDiv.offsetTop;
	if(oDiv.setCapture)
	{
	oDiv.οnmοusemοve=doDrag;
	oDiv.οnmοuseup=stopDrag;
	oDiv.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag,true);
	document.addEventListener("mouseup",stopDrag,true);
	}
	zhezhao.style.display='block';
	};
	function doDrag(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+divStart.x;
	var t=oEvent.clientY-mouseStart.y+divStart.y;
	var w=l+oDiv.offsetWidth;
	var h=t+oDiv.offsetHeight;
	if(w<oDiv.offsetWidth)
	{
	w=oDiv.offsetWidth;
	}
	else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
	{
	w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
	}
	if(h<oDiv.offsetHeight)
	{
	h=oDiv.offsetHeight;
	}
	else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
	{
	h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
	}
	oDiv2.style.width=w+"px";
	oDiv2.style.height=h+"px";
	};
	function stopDrag()
	{
	if(oDiv.releaseCapture)
	{
	oDiv.οnmοusemοve=null;
	oDiv.οnmοuseup=null;
	oDiv.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag,true);
	document.removeEventListener("mouseup",stopDrag,true);
	}
	zhezhao.style.display='none';
	};
	//h2完美拖拽
	h2.οnmοusedοwn=function(ev)
	{
	var oEvent=ev\|\|event;
	mouseStart.x=oEvent.clientX;
	mouseStart.y=oEvent.clientY;
	divStart.x=oDiv2.offsetLeft;
	divStart.y=oDiv2.offsetTop;
	if(h2.setCapture)
	{
	h2.οnmοusemοve=doDrag3;
	h2.οnmοuseup=stopDrag3;
	h2.setCapture();
	}
	else
	{
	document.addEventListener("mousemove",doDrag3,true);
	document.addEventListener("mouseup",stopDrag3,true);
	}
	zhezhao.style.display='block';
	};
	function doDrag3(ev)
	{
	var oEvent=ev\|\|event;
	var l=oEvent.clientX-mouseStart.x+divStart.x;
	var t=oEvent.clientY-mouseStart.y+divStart.y;
	if(l<0)
	{
	l=0;
	}
	else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
	{
	l=document.documentElement.clientWidth-oDiv2.offsetWidth;
	}
	if(t<0)
	{
	t=0;
	}
	else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
	{
	t=document.documentElement.clientHeight-oDiv2.offsetHeight;
	}
	oDiv2.style.left=l+"px";
	oDiv2.style.top=t+"px";
	};
	function stopDrag3()
	{
	if(h2.releaseCapture)
	{
	h2.οnmοusemοve=null;
	h2.οnmοuseup=null;
	h2.releaseCapture();
	}
	else
	{
	document.removeEventListener("mousemove",doDrag3,true);
	document.removeEventListener("mouseup",stopDrag3,true);
	}
	zhezhao.style.display='none';
	}
	};
	</script>
	</head>
	<body>
	<div id="div2">
	<div style="width:100%; height:100%; overflow:hidden;">
	<h2>完美的拖拽</h2>
	<p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'</p>
	<p>烈火学院 Liehuo.Net</p>
	<div id="right"></div>
	<div id="div1">拖</div>
	<div id="bottom"></div>
	</div>
	</div>
	<div id="zhezhao"></div>
	</body>
	</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

白云v城主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美的javascript模态窗口拖动、拖放大小

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;met
复制链接

扫一扫