完美的JavaScript网页拖动

2020-01-27 13:44:23

字体：大中小

来源：转载

供稿：网友

体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩校想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。

<!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>Js层拖动 - www.cuoxin.com</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.onload=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.onmousedown=function(ev)	{		var oEvent=ev||event;		mouseStart.x=oEvent.clientX;		mouseStart.y=oEvent.clientY;		rightStart.x=right.offsetLeft;		if(right.setCapture)		{			right.onmousemove=doDrag1;			right.onmouseup=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.onmousemove=null;			right.onmouseup=null;			right.releaseCapture();		}		else		{			document.removeEventListener("mousemove",doDrag1,true);			document.removeEventListener("mouseup",stopDrag1,true);		}	};	//往下拽	bottom.onmousedown=function(ev)	{		var oEvent=ev||event;		mouseStart.x=oEvent.clientX;		mouseStart.y=oEvent.clientY;		bottomStart.y=bottom.offsetTop;		if(bottom.setCapture)		{			bottom.onmousemove=doDrag2;			bottom.onmouseup=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.onmousemove=null;			bottom.onmouseup=null;			bottom.releaseCapture();		}		else		{			document.removeEventListener("mousemove",doDrag2,true);			document.removeEventListener("mouseup",stopDrag2,true);		}	};	//往左右同时拽	oDiv.onmousedown=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.onmousemove=doDrag;			oDiv.onmouseup=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.onmousemove=null;			oDiv.onmouseup=null;			oDiv.releaseCapture();		}		else		{			document.removeEventListener("mousemove",doDrag,true);			document.removeEventListener("mouseup",stopDrag,true);		}		zhezhao.style.display='none';	};		//h2完美拖拽	h2.onmousedown=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.onmousemove=doDrag3;			h2.onmouseup=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.onmousemove=null;			h2.onmouseup=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>	<div id="right"></div>	<div id="div1">拖</div>	<div id="bottom"></div>	</div></div><div id="zhezhao"></div></body></html>

上一篇：Js文字章节跳转功能的模拟代码

下一篇：JavaScript 取得当前页面的URL网址参数