<title> Drag to change the size of the layer </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:100%; Overflow:auto; Width
100%; border:2px inset White; padding:8px;
background-position:0% 50%}
</style>
<script language=javascript>
var theobject = null;
function Resizeobject () {
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 Getdirection (EL) {
var xPos, YPos, offset, dir;
dir = "";
XPos = Window.event.offsetX;
YPos = Window.event.offsetY;
offset = 8; The distance from the edge in pixels
if (ypos<offset) dir + = "n";
else if (YPos > El.offsetheight-offset) dir + = "s";
if (xpos<offset) dir + = "W";
else if (XPos > El.offsetwidth-offset) dir + = "E";
return dir;
}
function Dodown () {
var el = getreal (event.srcelement, "ClassName", "Resizeme");
if (el = = null) {
Theobject = null;
Return
}
dir = Getdirection (EL);
if (dir = = "") return;
Theobject = new Resizeobject ();
Theobject.el = El;
Theobject.dir = dir;
THEOBJECT.GRABX = Window.event.clientX;
Theobject.graby = Window.event.clientY;
Theobject.width = El.offsetwidth;
Theobject.height = El.offsetheight;
Theobject.left = El.offsetleft;
Theobject.top = El.offsettop;
Window.event.returnValue = false;
Window.event.cancelBubble = true;
}
function Doup () {
if (theobject! = null) {
Theobject = null;
}
}
function Domove () {
Var el, XPos, YPos, str, xMin, ymin;
XMin = 8; The smallest width possible
Ymin = 8; Height
el = Getreal (event.srcelement, "ClassName", "Resizeme");
if (El.classname = = "Resizeme") {
str = getdirection (EL);
Fix the cursor
if (str = = "") str = "Default";
else str + = "-resize";
El.style.cursor = str;
}
Dragging starts here
if (theobject! = null) {
if (Dir.indexof ("E")! =-1)
Theobject.el.style.width = Math.max (xMin, Theobject.width + window.event.clientx-theobject.grabx) + "px";
if (Dir.indexof ("s")! =-1)
Theobject.el.style.height = Math.max (ymin, Theobject.height + window.event.clienty-theobject.graby) + "px";
if (Dir.indexof ("w")! =-1) {
Theobject.el.style.left = math.min (Theobject.left + WINDOW.EVENT.CLIENTX-THEOBJECT.GRABX, Theobject.left + Theobject.width-xmin) + "px";
Theobject.el.style.width = Math.max (xMin, Theobject.width-window.event.clientx + theobject.grabx) + "px";
}
if (Dir.indexof ("n")! =-1) {
Theobject.el.style.top = math.min (Theobject.top + window.event.clienty-theobject.graby, Theobject.top + Theobject.height-ymin) + "px";
Theobject.el.style.height = Math.max (ymin, Theobject.height-window.event.clienty + theobject.graby) + "px";
}
Window.event.returnValue = false;
Window.event.cancelBubble = true;
}
}
function Getreal (el, type, value) {
temp = El;
while ((temp! = null) && (temp.tagname! = "BODY")) {
if (eval ("temp." + type) = = value) {
el = temp;
Return el;
}
temp = temp.parentelement;
}
Return el;
}
Document.onmousedown = Dodown;
Document.onmouseup = Doup;
Document.onmousemove = Domove;
</SCRIPT>
<body>
<div class= "Resizeme" id= "Testdiv" >
<div id= "Innernice" >
<p align= "center" > </p>
<p align= "center" >
Please drag the mouse at the border </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Drag the mouse to change the size of the layer
