<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf8" />
<style>
<!--
#outerRasiedDiv {
-moz-opacity:0.5;
filter:alpha(opacity=40);
position: absolute;
z-index: 2;
overflow:hidden;
background:#f90;
margin:0px;
/* border:1px red solid; */
padding:10px;
height:90px;
width:90px;
}
#innerDiv {
-moz-opacity:0.5; filter:alpha(opacity=30);
cursor: pointer;
margin:0px;
/* border:1px red solid; */
background: #ffffff;
height: 100%;
width: 100%;
position:relative;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var eS
var eSs
var DiyW
var DiyH
var eS=1;
var theobject = null;
function resizeObject()
{
this.el = null;
this.dir = "";
this.grabx = null;
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}
var d = 0;
function find(_jerry, _evt){
d=_jerry;
var evt;
evt = _evt ? _evt : (window.event ? window.event : null);
if(evt.pageX)
{
x=evt.pageX - document.getElementById(d).offsetLeft;
y=evt.pageY - document.getElementById(d).offsetTop;
}else{
x=evt.clientX - document.getElementById(d).style.pixelLeft;
y=evt.clientY - document.getElementById(d).style.pixelTop;
}
}
function dragit(_evt){
if(d==0)
return false
else{
var evt;
evt = _evt ? _evt : (window.event ? window.event : null);
if(document.getElementById(d).offsetLeft > 1){
document.getElementById(d).style.left=(evt.clientX-x)+"px";
}else{
document.getElementById(d).style.left = 2+"px";
}
if(document.getElementById(d).offsetTop > 1){
document.getElementById(d).style.top=(evt.clientY-y)+"px";
}else{
document.getElementById(d).style.top = 2+"px";
}
}
}
function getDirection(el, evt)
{
var xPos, yPos, offset;
var dir = "";
var evt;
evt = evt ? evt : (window.event ? window.event : null);
xPos = evt.clientX;
yPos = evt.clientY;
offset = 10;
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(_evt) {
var evt;
evt = _evt ? _evt : (window.event ? window.event : null);
if(evt.pageX){
var el = getReal(evt.target, "className", "resizeMe");
}else{
var el = getReal(evt.srcElement, "className", "resizeMe");
}
if (el == null) {
theobject = null;
return;
}
dir = getDirection(el, _evt);
if (dir == "") return;
theobject = new resizeObject();
theobject.el = el;
theobject.grabx = evt.clientX; //鼠標點下時的座標x長
theobject.graby = evt.clientY; //鼠標點下時的座標y長
theobject.width = el.offsetWidth; //記錄鼠標點下是div outerRasiedDiv的寬
theobject.height = el.offsetHeight; //記錄鼠標點下是div outerRasiedDiv的高
//evt.returnValue = false;
//evt.cancelBubble = true;
}
function doUp() {
if (theobject != null) {
theobject = null;
}
}
function doMove(_evt) {
var el, xPos, yPos, str, xMin, yMin;
xMin = 10;
yMin = 10;
var evt;
evt = _evt ? _evt : (window.event ? window.event : null);
if(evt.pageX){
var el = getReal(evt.target, "className", "resizeMe");
}else{
var el = getReal(evt.srcElement, "className", "resizeMe");
}
/*
if (el.className == "resizeMe") {
str = getDirection(el, _evt);
if (str == "") str = "default";
else str += "-resize";
el.style.cursor = str;
}
*/
if(theobject != null) {
if (dir.indexOf("e") != -1)
document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width + evt.clientX - theobject.grabx)+"px";
if(eSs)
document.getElementById("outerRasiedDiv").style.height = (theobject.el.style.width.replace("px","")/eS)+"px";
if (dir.indexOf("s") != -1)
document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, theobject.height + evt.clientY - theobject.graby)+"px";
if(eSs)
document.getElementById("outerRasiedDiv").style.width = (theobject.el.style.height.replace("px","")*eS)+"px";
if (dir.indexOf("w") != -1) {
document.getElementById("outerRasiedDiv").style.left = Math.min(10 + evt.clientX - theobject.grabx, 10+ theobject.width - xMin)+"px";
document.getElementById("outerRasiedDiv").style.width = Math.max(xMin, theobject.width - evt.clientX + theobject.grabx)+"px";
}
if (dir.indexOf("n") != -1) {
document.getElementById("outerRasiedDiv").style.top = Math.min((10 + evt.clientY - theobject.graby), (10+ theobject.height - yMin))+"px";
document.getElementById("outerRasiedDiv").style.height = Math.max(yMin, (theobject.height - evt.clientY + theobject.graby))+"px";
}
evt.returnValue = false;
evt.cancelBubble = true;
d=0
}
}
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>
</head>
<body>
<div class="resizeMe" id="outerRasiedDiv">
<div id="innerDiv" style="" οnmοusemοve="dragit(event);" οnmοuseup="d=0" οnmοuseleave="d=0" οnmοusedοwn="find('outerRasiedDiv', event)"></div>
</div>
<img alt="" src="http://jerrydou.space.bala.com.cn/usrdata/31/77/jerrydou/album/3749/2006040602181304.jpg" />
</body>
</html>