关联div 拖动大小demo

xxtianxiaxing

浏览: 708378 次
性别:
来自: 陕西

最近访客更多访客>>

dhx20022889

huaiao_chen

Corelory

FirstBlood

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

haha.rar (2.2 KB)
下载次数: 64

分享到：

heritrix 1.14.3 源码部署配置 | eclipse里打包时排除.svn目录

2009-09-27 12:07
浏览 1494
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关联div 拖动大小demo

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

关联div 拖动大小demo

评论

发表评论

相关推荐

事务 不回滚

collectionTest

程序员珍藏的东西

java 重启 路由器 DI-604

java 环境变量

正则表达式替换 html 标签

js 导航分类 特效

js arguments 学习

java 图片 验证码

注册模块 js 校验

EL表达式截取字符串

eclipse myeclipse java 代码 注释 模板

java 字符串指定长度

jquery 做的好看 button

Eclipse中设置在创建新类时自动生成注释

cookie 历史记录

解决javascript读取中文cookie时的乱码问题

静态页面生成

ff和ie通用div置右上角落

Acegi在SSH(Struts+Spring+Hibernate)初级应用

最近访客更多访客>>

事务不回滚

java 重启路由器 DI-604

js 导航分类特效

java 图片验证码

eclipse myeclipse java 代码注释模板