就是用js控制一下div的宽和高,可以用鼠标拖拽的,不多说了,代码如下:
html代码:
--------------------------结束------------------------
- function getPosition(obj)
- {
- var top = 0,left = 0;
- do
- {
- top += obj.offsetTop;
- left += obj.offsetLeft;
- }
- while ( obj = obj.offsetParent );
- var arr = new Array();
- arr[0] = top;
- arr[1] = left;
- return arr;
- }
- var moveFlag=false;
- var moveLeft=false;
- var moveRight=false;
- var moveTop=false;
- var moveBom=false;
- function ShowMouseStyle()
- {
- var x=event.clientX;
- var y=event.clientY;
- var div=document.getElementById("main");
- var divLeft= getPosition(div)[0];
- var divTop=getPosition(div)[1];
- var divRight=divLeft+parseInt(div.style.width);
- var divBom=divTop+parseInt(div.style.height);
- if(Math.abs(x-divLeft)<3||moveLeft)
- {
- div.style.cursor="w-resize";
- if(moveFlag)
- MoveLeft(divLeft,div);
- }
- else if(Math.abs(x-divRight)<3||moveRight)
- {
- div.style.cursor="w-resize";
- if(moveFlag)
- MoveRight(divRight,div);
- }
- else if(Math.abs(y-10-divTop)<3||moveTop)
- {
- div.style.cursor="n-resize";
- if(moveFlag)
- MoveTop(divTop,div)
- }
- else if(Math.abs(y-5-divBom)<3||moveBom)
- {
- div.style.cursor="n-resize";
- if(moveFlag)
- MoveBom(divBom,div)
- }
- else
- {
- div.style.cursor="";
- }
- }
- function move(flag)
- {
- moveFlag=flag;
- if(!flag)
- {
- moveLeft=false;
- moveRight=false;
- moveTop=false;
- moveBom=false;
- }
- }
- function MoveLeft(leftPx,o)
- {
- var r=leftPx-event.clientX;
- if((parseInt(o.style.width)+r)>100&&(parseInt(o.style.width)+r)<600)
- o.style.width=parseInt(o.style.width)+r;
- moveLeft=true;
- }
- function MoveRight(rightPx,o)
- {
- var r=event.clientX-rightPx;
- if((parseInt(o.style.width)+r)>100&&(parseInt(o.style.width)+r)<600)
- o.style.width=parseInt(o.style.width)+r;
- moveRight=true;
- }
- function MoveTop(topPx,o)
- {
- var r=event.clientY-topPx;
- if((parseInt(o.style.height)+r)>100&&(parseInt(o.style.height)+r)<500)
- o.style.height=parseInt(o.style.height)+r;
- moveTop=true;
- }
- function MoveBom(bomPx,o)
- {
- var r=event.clientY-bomPx;
- if((parseInt(o.style.height)+r)>100&&(parseInt(o.style.height)+r)<500)
- o.style.height=parseInt(o.style.height)+r;
- moveBom=true;
- }
- <body onmousemove="ShowMouseStyle()" onmousedown="move(true)" onmouseup="move(false)">
- <div id="main" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; width:101px; height:101px;">
- </div>
- </body>