`
xxtianxiaxing
  • 浏览: 661828 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

关联div 拖动大小demo

    博客分类：
  • web
Web 
阅读更多 
<html>

	<head>
		<title>改变层的大小-阿里西西WEB开发</title>
		<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
		<style>
{
box-sizing
:
 
border-box
;
 
moz-box-sizing
:
 
border-box


}
#testDiv {
	background-color: buttonface;
	background-repeat: repeat;
	background-attachment: scroll;
	color: #3969A5;
	height: 300px;
	left: 30px;
	overflow: hidden;
	width: 500;
	z-index: 2;
	border: 2px outset white;
	margin: 0px;
	padding: 2px;
	background-position: 0% 50%
}

body {
	font-family: Verdana;
	font-size: 9pt
}

#innerNice {
	background-color: white;
	background-repeat: repeat;
	background-attachment: scroll;
	color: #3969A5;
	height: 49%;
	overflow: auto;
	width: 100%;
	border: 2px inset white;
	padding: 8px;
	background-position: 0% 50%
}

#innerNice2 {
	background-color: white;
	background-repeat: repeat;
	background-attachment: scroll;
	color: #3969A5;
	height: 2%;
	overflow: auto;
	width: 100%;
	border: 1px inset white;
	padding: 1px;
	background-position: 0% 50%
}

#innerNice1 {
	background-color: white;
	background-repeat: repeat;
	background-attachment: scroll;
	color: #3969A5;
	height: 49%;
	overflow: auto;
	width: 100%;
	border: 2px inset white;
	padding: 8px;
	background-position: 0% 50%
}
</style>

		<SCRIPT language=javascript>
	window.onload=init;

	function init(){
		divObj1 = document.getElementById("innerNice");
		divObj2 = document.getElementById("innerNice1");
	}

/////////////////////////////////////////////////////////////////////////
// Generic Resize by Erik Arvidsson                                    //
//                                                                     //
// You may use this script as long as this disclaimer is remained.     //
// See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info               //
//                                                                     //
// How to use this script!                                             //
// Link the script in the HEAD and create a container (DIV, preferable //
// absolute positioned) and add the class="resizeMe" to it.            //
/////////////////////////////////////////////////////////////////////////

var divObj1 = null; //This gets a value as soon as a resize start
var divObj2 = null;

var theobject1 = null; //This gets a value as soon as a resize start
var theobject2 = null; 

	function resizeObject1() {
		this.el = null; //pointer to the object
		this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
		this.grabx = null;     //Some useful values
		this.graby = null;
		this.width = null;
		this.height = null;
		this.left = null;
		this.top = null;
	}
	function resizeObject2() {
		this.el = null; //pointer to the object
		this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
		this.grabx = null;     //Some useful values
		this.graby = null;
		this.width = null;
		this.height = null;
		this.left = null;
		this.top = null;
	}

	//Find out what kind of resize! Return a string inlcluding the directions
	function getDirection1(el) {
		var xPos, yPos, offset, dir;
		dir = "";
		yPos = window.event.offsetY;
		offset = 8; //The distance from the edge in pixels
		if (yPos<offset) dir += "s";
		else if (yPos > divObj1.offsetHeight+offset) dir += "n";
		document.getElementById("aa").innerHTML = "yPos:"+yPos;
		return dir;
	}

	function getDirection2(el) {
		var xPos, yPos, offset, dir;
		dir = "";
		yPos = window.event.offsetY;
		offset = 8; //The distance from the edge in pixels
		if (yPos<offset) dir += "s";
		else if (yPos > divObj2.offsetHeight-offset) dir += "n";
		document.getElementById("bb").innerHTML = "yPos:"+yPos;
		return dir;
	}

	function doDown() {
		//alert("鼠标按下");
		var el = getReal(event.srcElement);

		if (el == null) {
		   theobject1 = null;
		   theobject2 = null;
		   return;
		}  

		dir1 = getDirection1(el);
		if (dir1 == "") return;

		dir2 = getDirection2(el);
		if (dir2 == "") return;


		theobject1 = new resizeObject1();
		theobject2 = new resizeObject2();
		  
		theobject1.el = divObj1;
		theobject1.dir = dir1;
		theobject1.grabx = window.event.clientX;
		theobject1.graby = window.event.clientY;
		theobject1.width = divObj1.offsetWidth;
		theobject1.height = divObj1.offsetHeight;
		theobject1.left = divObj1.offsetLeft;
		theobject1.top = divObj1.offsetTop;

		document.getElementById("cc").innerHTML = "theobject1.grabx:"+theobject1.grabx+";theobject1.graby:"+theobject1.graby+";theobject1.width:"+theobject1.width+";theobject1.height:"+theobject1.height+";theobject1.left:"+theobject1.left+";theobject1.top:"+theobject1.top;
		theobject2.el = divObj2;
		theobject2.dir = dir2;

		theobject2.grabx = window.event.clientX;
		theobject2.graby = window.event.clientY + 6 + divObj1.offsetHeight;
		theobject2.width = divObj2.offsetWidth;
		theobject2.height = divObj2.offsetHeight;
		theobject2.left = divObj2.offsetLeft;
		theobject2.top = divObj2.offsetTop;

		document.getElementById("dd").innerHTML = "theobject2.grabx:"+theobject2.grabx+";theobject2.graby:"+theobject2.graby+";theobject2.width:"+theobject2.width+";theobject2.height:"+theobject2.height+";theobject2.left:"+theobject2.left+";theobject2.top:"+theobject2.top;
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}

	function doUp() {
		if (theobject1 != null) {
		   theobject1 = null;
		}
		if (theobject2 != null) {
		   theobject2 = null;
		}
	}

	function doMove() {
		var el, xPos, yPos, str, xMin, yMin;
		xMin = 8; //The smallest width possible
		yMin = 8; //             height

		el = getReal(event.srcElement);

		if (el.className == "resizeMe") {
		   str = getDirection1(el);
		   if (str == "") str = "default";
		   else str += "-resize";
		   el.style.cursor = str;
		}

		
		if(theobject1 != null) {

		   if (dir1.indexOf("s") != -1)
				divObj1.style.height = Math.max(yMin, theobject1.height + window.event.clientY - theobject1.graby) + "px";
		   if (dir1.indexOf("n") != -1) {
				divObj1.style.top=Math.min(theobject1.top+window.event.clientY-theobject1.graby,theobject1.top+theobject1.height-yMin)+"px";
				divObj1.style.height = Math.max(yMin, theobject1.height - window.event.clientY + theobject1.graby) + "px";	
		   }
		}

		if(theobject2 != null) {
		   if (dir2.indexOf("s") != -1)
				divObj2.style.height = Math.max(yMin, theobject2.height - window.event.clientY + theobject1.graby) + "px";
		   if (dir2.indexOf("n") != -1) {
				divObj2.style.height = Math.max(yMin, theobject2.height + window.event.clientY - theobject1.graby) + "px";
		   }		   
		}
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}


	function getReal(el) {
		
		temp = el;
		while ((temp != null) && (temp.tagName != "BODY")) {
		   if(temp.id == "innerNice2") {
			el = temp;
			return el;
		   }
		   temp = temp.parentElement;
		}
		return el;
	}

document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
</SCRIPT>

		<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
		<meta name="ProgId" content="FrontPage.Editor.Document">
	</head>

	<body>

		<div id="testDiv">
			<div id="innerNice">
				<p align="center">
				</p>
				<p align="center">
					请在边框处拖动鼠标
				<p>
				</p>
				<p>
				</p>
				<p>
				</p>
			</div>
			<div id="innerNice2" class="resizeMe"></div>
			<div id="innerNice1">
				<p align="center">
				</p>
				<p align="center">
					请在边框处拖动鼠标1
				<p>
				</p>
				<p>
				</p>
				<p>
				</p>
			</div>
		</div>
		<div id="aa"></div>
<div id="bb"></div>
<div id="cc"></div>
<div id="dd"></div>
	</body>
</html>
分享到：
| eclipse里打包时排除.svn目录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics