快过年了，手里没活了，就写了这个效果消遣了一下。。。刚刚老板说明天可以不用来了(开始放假了，嘿嘿)///觉得可以的话，自己封装一下，传参数id进去就OK了。呵呵。。。。想了想，加一句，祝各位IT童鞋新年快乐!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Resize </title>
<style>
*{margin:0;padding:0:}
.stage{position:relative;width:500px;height:400px;margin:30px auto;border:1px solid #CCC;-moz-user-select:none;}
.stage .m{position:absolute;width:100px;height:100px;left:100px;top:100px;border:1px dashed #CCC;}
.stage .r0,
.stage .r1,
.stage .r2,
.stage .r3,
.stage .r4,
.stage .r5,
.stage .r6,
.stage .r7{position:absolute;width:8px;height:8px;font-size:1px;background-color:#333;}
.stage .r0{left:-4px;top:-4px;cursor:nw-resize;}
.stage .r1{left:50%;top:-4px;margin-left:-4px;cursor:n-resize;}
.stage .r2{right:-4px;top:-4px;cursor:ne-resize;}
.stage .r3{left:-4px;top:50%;margin-top:-4px;cursor:e-resize;}
.stage .r4{right:-4px;top:50%;margin-top:-4px;cursor:w-resize;}
.stage .r5{left:-4px;bottom:-4px;cursor:sw-resize;}
.stage .r6{left:50%;bottom:-4px;margin-left:-4px;cursor:s-resize;}
.stage .r7{right:-4px;bottom:-4px;cursor:se-resize;}
</style>
</head>
<body>
<div id="stage" class="stage"></div>
<script>
//<![CDATA[
(function(id){
var stage=document.getElementById(id),offx=(stage.offsetHeight-stage.clientHeight)/2,offy=(stage.offsetWidth-stage.clientWidth)/2,oc,m=document.createElement('div'),em=document.createElement("em"),mc,isResize=0,iCoords={x:0,y:0};
stage.onmousedown=function(e){
e=e||event;
var t=e.target||e.srcElement;
if(t.tagName=="EM")
{
isResize=t.className;
mc=m.getBoundingClientRect();
oc=this.getBoundingClientRect();
iCoords.x=e.clientX;
iCoords.y=e.clientY;
m.style.left=mc.left-oc.left-offx+"px";
m.style.top=mc.top-oc.top-offy+"px";
}
}
for(var i=8;i--;)
{
em=em.cloneNode(false);
em.className='r'+i;
m.appendChild(em);
}
m.className='m';
stage.onmousemove=function(e)
{
if(isResize)
{
e=e||event;
var x=e.clientX,y=e.clientY,left=mc.left,top=mc.top,right=mc.right,bottom=mc.bottom;
x=Math.min(Math.max(x,oc.left+offx),oc.right-offx);
y=Math.min(Math.max(y,oc.top+offy),oc.bottom-offy);
switch(isResize)
{
case "r0":
left+=x-iCoords.x;
top+=y-iCoords.y;
m.style.height=Math.max(10,bottom-top)+"px";
m.style.top="auto";
m.style.bottom=oc.bottom-bottom-offy+"px";
m.style.width=Math.max(10,right-left)+"px";
m.style.left="auto";
m.style.right=oc.right-right-1+"px";
break;
case "r1":
top+=y-iCoords.y;
m.style.height=Math.max(10,bottom-top)+"px";
m.style.top="auto";
m.style.bottom=oc.bottom-bottom-offy+"px";
break;
case "r2":
right+=x-iCoords.x;
top+=y-iCoords.y;
m.style.height=Math.max(10,bottom-top)+"px";
m.style.top="auto";
m.style.bottom=oc.bottom-bottom-offy+"px";
m.style.width=Math.max(10,right-left)+"px";
break;
case "r3":
left+=x-iCoords.x;
m.style.width=Math.max(10,right-left)+"px";
m.style.left="auto";
m.style.right=oc.right-right-offx+"px";
break;
case "r4":
right+=x-iCoords.x;
m.style.width=Math.max(10,right-left)+"px";
break;
case "r5":
left+=x-iCoords.x;
bottom+=y-iCoords.y;
m.style.height=Math.max(10,bottom-top)+"px";
m.style.left="auto";
m.style.right=oc.right-right-offx+"px";
m.style.width=Math.max(10,right-left)+"px";
break;
case "r6":
bottom+=y-iCoords.y;
m.style.height=Math.max(10,bottom-top)+"px";
break;
case "r7":
bottom+=y-iCoords.y;
right+=x-iCoords.x;
m.style.width=Math.max(10,right-left)+"px";
m.style.height=Math.max(10,bottom-top)+"px";
break;
}
return false;
}
}
stage.onmouseup=m.onmouseup=function(){isResize=0;}
if(typeof stage.onmouseleave=="undefined")
{
stage.onmouseout=function(e){ var t=this.compareDocumentPosition(e.relatedTarget);
t!=0&&t!=20&&this.onmouseup();
}
}
else
{
stage.onmouseleave=stage.onmouseup;
}
stage.appendChild(m);
})('stage');
//]]>
</script>
</body>
</html>