js实现方法,通过八个点改变div的大小
复制代码代码如下所示:调整大小
# rrightdown,# rleftdown,# rleftup,# rrightup,#权,# rleft,# RUP,# rdown {
位置:绝对;背景:# C00;宽度:6px;身高:6px;Z指数:5;字体大小:0;}
# rleftdown,# rrightup {光标:NE大小;}
# rrightdown,# rleftup {光标:NW大小;}
#权,# rleft {光标:e-resize;}
# RUP,# rdown {光标:n-resize;}
# rrightdown {底:- 3px;右:- 3px;}
# rleftdown {底:- 3px;左:- 3px;}
# rrightup {顶:- 3px;右:- 3px;}
# rleftup {顶:- 3px;左:- 3px;}
#权{右:- 3px;顶:50% }
# rleft {左:- 3px;顶:50% }
# RUP {顶:- 3px;左:50% }
# rdown {底:- 3px;左:50% }
var =(函数(UA){)
var = { };
s.ie = ua.match( / MSIE({ D. } +)/)真的假的;
美国ua.match火狐(Firefox = / /({ D. } +)/)真的假的;
美国铬= ua.match( / /铬({ D. } +)/)真的假的;
(s.ie6 = s.ie({ / MSIE( D) 0 / i.exec(导航。用户代理)} { 0 } { 1 } = = 6))真的假的;
(s.ie7 = s.ie({ / MSIE( D) 0 / i.exec(导航。用户代理)} { 0 } { 1 } = = 7))真的假的;
(s.ie8 = s.ie({ / MSIE( D) 0 / i.exec(导航。用户代理)} { 0 } { 1 } = = 8))真的假的;
返回的;
})(navigator.useragent.tolowercase());
函数(id){
返回document.getelementbyid(ID);
};
函数(e,o){
为(var I o)
我e.style { } = O {我};
};
函数(目标,源){
对于(源代码中的var属性){
目的地{属性};
}
};
Var Bind =函数(对象,乐趣){
var args = array.prototype.slice.call(参数)片(2);
返回函数(){
返回fun.apply(对象,args);
}
};
Var BindAsEventListener =函数(对象,好玩){
var args = array.prototype.slice.call(参数)片(2);
返回函数(事件){
返回fun.apply(对象,{事件| |窗口。事件} .concat(args));
}
};
无功currentstyle =功能(元){
返回element.currentstyle | | document.defaultview.getcomputedstyle(元空);
};
功能听听(元,E,FN){
element.addeventlistenerelement.addeventlistener(E,FN,false):element.attachevent(+ E,FN);
};
功能removelistener(元,E,FN){
element.removeeventlistenerelement.removeeventlistener(E,FN,false):element.detachevent(+ E,FN)
};
var类=函数(属性){
无功_class({ return)=功能(参数{ 0 } = = null!This.initialize typeof(这个初始化)= 'function)this.initialize.apply(这个参数):这;};
_class.prototype =性能;
返回_class;
};
var调整大小=新的类({
初始化:功能(obj){
this.obj = obj;
this.resizeelm = null;
this.fun = null; / /记录所引发的事件指数
this.original = {}; / /阵列记录开始状态
this.width = null;
this.height = null;
this.fr = bindaseventlistener(这,这,调整大小);
this.fs =绑定(这,这,停止);
},
设置:函数(ELM,方向){
如果(!榆树)回归;
this.resizeelm =榆树;
AddListener(这个。resizeelm,'mousedown ',BindAsEventListener(今this.start,这{方向}));
返回此;
},
开始:函数(E,乐趣){
this.fun =乐趣;
this.original = { parseInt(currentstyle(这个.obj)。宽度),parseInt(currentstyle(这个.obj)。高度),parseInt(currentstyle(高度)),和((
this.width =(本。原{ 2 } | | 0)+本。原{ 0 };
this.height =(本。原{ 3 } | | 0)+本。原{ 1 };
AddListener(文档,MouseMove
AddListener(文档,'mouseup ',这个FS);
},
调整大小:函数(e){
This.fun(E);
Sys.IE(这个。resizeelm。onlosecapture =函数(){ this.fs()})):(这个。resizeelm。onblur =函数(){ this.fs()})
},
停止:函数(){
RemoveListener(文档,MouseMove
RemoveListener(文档,MouseMove
window.getselection window.getselection()RemoveAllRanges():document.selection.empty();
},
函数(e){
这个高度> e.clientycss(this.obj,{顶:e.clienty +PX
},
函数(e){
e.clienty >本。原{ 3 } CSS(this.obj,{顶:这个原{ 3 } + 'px,身高:e.clienty-this。原{ 3 } + 'px ' }):this.turnup(E);
},
左:函数(e){
e.clientx < this.widthcss(this.obj,{左:e.clientx + 'px,宽度:this.width-e.clientx +PX}):this.turnright(E);
},
右:函数(e){
e.clientx >本。原{ 2 } CSS(this.obj,{左:这。原{ 2 } + 'px,宽度:e.clientx-this。原{ 2 } +PX}):this.turnleft(E);
},
LeftUp:功能(e){
This.up(E);this.left(E);
},
leftdown:功能(e){
this.left(E);this.down(E);
},
回:功能(e){
This.up(E);this.right(E);
},
抛:功能(e){
This.right(E);this.down(E);
},
床:功能(e){
CSS(this.obj,{顶:这个高度+ 'px,身高:e.clienty - this.height + 'px});
},
翻:功能(e){
CSS(this.obj,{顶:e.clienty + 'px,高度:本。原{ 3 } - e.clienty + 'px});
},
TurnRight:功能(e){
CSS(this.obj,{左:这个宽度+ 'px,宽度:e.clientx - this.width + 'px});
},
左转:功能(e){
CSS(this.obj,{左:e.clientx + 'px,宽度:这。原{ 2 } - e.clientx + 'px});
}
});
在window.onload =函数(){
新的调整($('ss ')),($('rup '),向上的),($('rdown '),Down)。集($('rleft),设置)(($)),(($)),(($)),(($))。
}