首页 »Html教程 » javascriptdiv:javascript 调整宽度和高度的div »正文
javascriptdiv:javascript 调整宽度和高度的div
来源: 发布时间:星期五, 2008年9月26日 浏览:151次 评论:0
不多说，一起来看代码吧
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;
}
html代码：
<body _disibledevent="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; width:101px; height:101px;">
</div>
</body>
相关文章
读者评论
发表评论
|
|
