改变大小控件

最新推荐文章于 2023-04-30 11:09:17 发布

zhihua_1983

最新推荐文章于 2023-04-30 11:09:17 发布

阅读量496

点赞数

分类专栏： javascript 文章标签： function div null border table javascript

本文链接：https://blog.csdn.net/zhihua_1983/article/details/1487102

版权

javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

小小的封装控件（可改变大小，用法同拖动控件一样)
canResize（可拖动）,rlayernum(要改变大小的父元件层数)

<!--

Author: Kw.Tsou

Date: 2005/11/26

Content: 为页面上的元件提供可改变大小的功能

UseMark: 在body上behavior此物件，然后在需要改变大小的物件上设置canResize="1"属性即可

-->

< PUBLIC:COMPONENT >

< PUBLIC:ATTACH EVENT ="onmousedown" ONEVENT ="resize_eDown()" />

< PUBLIC:ATTACH EVENT ="onmouseup" ONEVENT ="resize_eUp()" />

< PUBLIC:ATTACH EVENT ="onmousemove" ONEVENT ="resize_eMove()" />

< PUBLIC:ATTACH EVENT ="onscroll" ONEVENT ="resize_eUp()" />

< PUBLIC:EVENT ID ="resizeevent" NAME ="ontagresize" />

</ PUBLIC:COMPONENT >

< SCRIPT Language ="JavaScript" >

var isse = false;

var isw = false;

var iss = false;

var OFFSET = 10;

var MINWIDTH = 50;

var MINHEIGHT = 20;

var resizeObj = null; //虚线框物件

function setResizeObj(el){

if(el!=null){

resizeObj = el;

resizeObj.isLock = true;

}

function releaseResizeObj(){

if(resizeObj!=null){

resizeObj.isLock = false;

var evt = createEventObject();

evt.src = resizeObj;

try { resizeevent.fire(evt); } catch(e) {};

resizeObj = null;

}

function resize_eMove()

{

var e = window.event;

var el = e.srcElement;

if(resizeObj!=null&&window.event.button=="1"){

var ex = e.clientX;

var ey = e.clientY;

var w = resizeObj.offsetWidth + ex - resizeObj.xx;

var h = resizeObj.offsetHeight + ey - resizeObj.yy ;

resizeObj.xx = ex;

resizeObj.yy = ey;

if(w<MINWIDTH)w=MINWIDTH;

if(h<MINHEIGHT)h=MINHEIGHT;

if(isse||isw)

resizeObj.style.width = w;

if(isse||iss)

resizeObj.style.height = h;

window.event.returnValue = false;

window.event.cancelBubble = true;

return false;

}

else{

if(el.canResize=="1"){

if(el!=null){

if(!el.oldcursor){

el.oldcursor = el.runtimeStyle.cursor||el.style.cursor;

if(!el.oldcursor)

el.oldcursor = "default";

}

var width = el.offsetWidth + el.scrollLeft;

var height = el.offsetHeight + el.scrollTop;

var offsetX = e.offsetX;

var offsetY = e.offsetY;

if((width-OFFSET<=offsetX&&offsetX<=width+OFFSET)&&(height-OFFSET<=offsetY&&offsetY<=height+OFFSET)){

el.runtimeStyle.cursor = "se-resize";

isse = true;

isw = false;

iss = false;

}

else if(width-OFFSET<=offsetX&&offsetX<=width+OFFSET){

el.runtimeStyle.cursor = "w-resize";

isse = false;

isw = true;

iss = false;

}

else if(height-OFFSET<=offsetY&&offsetY<=height+OFFSET){

el.runtimeStyle.cursor = "s-resize";

isse = false;

isw = false;

iss = true;

}

else{

el.runtimeStyle.cursor = el.oldcursor;

isse = false;

isw = false;

iss = false;

}

window.event.returnValue = false;

window.event.cancelBubble = true;

}

//取得移动对象(如只能拖动标题栏进行移动)

function getOpreateElement(el){

var ret = el;

var layernum = 0;

if(el.rlayernum)

layernum = parseInt(el.rlayernum);

for(var i=0;i<layernum;i++)

{

ret = ret.parentElement;

}

return ret;

}

function resize_eDown()

{

var e = window.event;

var el = e.srcElement;

if((el.canResize=="1")&&(isse||isw||iss)){

el = getOpreateElement(el);

if(el!=null){

setResizeObj(el);

resizeObj.xx = e.clientX;

resizeObj.yy = e.clientY;

window.status = "按住鼠标左键拖动可改变大小";

window.event.returnValue = false;

window.event.cancelBubble = true;

}

function resize_eUp()

{

releaseResizeObj();

window.status = "Done";

}

</ SCRIPT >

< html >

< head >

< title > 什么都可以拖动，也可改变大小 </ title >

< style >

body,div,td,font{font:menu;}

div,td{text-align:center}

</ style >

</ head >

< body style ="margin:0px" >

< div ontagmove ="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop" style ="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc) url(BlogResizeAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef" >

< div canResize ="1" canMove = "1" style ="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;" >

这是一个div（移动右边和下面，可改变大小哟）

</ div >

< div canResize ="1" style ="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;" >