复制代码代码如下:
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<título>Cambiar tamaño</título>
<tipo de estilo="texto/css">
#rDerechaAbajo,#rIzquierdaAbajo,#rIzquierdaArriba,#rDerechaArriba,#rDerecha,#rIzquierda,#rArriba,#rAbajo{
posición:absoluta;fondo:#C00;ancho:6px;alto:6px;índice z:5;tamaño de fuente:0;}
#rLeftDown,#rRightUp{cursor:ne-resize;}
#rDerechaAbajo,#rIzquierdaArriba{cursor:nw-resize;}
#rDerecha,#rIzquierda{cursor:e-resize;}
#rArriba,#rAbajo{cursor:n-resize;}
#rDerechaAbajo{ abajo:-3px; derecha:-3px;}
#rLeftDown{ abajo:-3px; izquierda:-3px;}
#rDerechaArriba{ arriba:-3px; derecha:-3px;}
#rLeftUp{ arriba:-3px; izquierda:-3px;}
#rDerecha{derecha:-3px; arriba: 50%}
#rIzquierda{ izquierda:-3px; arriba: 50%}
#rArriba{ arriba:-3px; izquierda: 50%}
#rAbajo{ abajo:-3px; izquierda: 50%}
</estilo>
</cabeza>
<cuerpo>
<div id='ss' style="alto:100px; ancho:100px; borde:1px sólido #000000; posición:absoluta; izquierda:200px; arriba:200px;" >
<div id="rRightDown"> </div>
<div id="rLeftDown"> </div>
<div id="rRightUp"> </div>
<div id="rLeftUp"> </div>
<div id="rDerecha"> </div>
<div id="rLeft"> </div>
<div id="rUp"> </div>
<div id="rAbajo"></div>
</div>
<guión>
var Sys = (función(ua){
var s = {};
s.IE = ua.match(/msie ([/d.]+)/)?true:false;
s.Firefox = ua.match(/firefox//([/d.]+)/)?true:false;
s.Chrome = ua.match(/chrome//([/d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
devolver s;
})(navigator.userAgent.toLowerCase());
var $ = función (identificación) {
devolver document.getElementById(id);
};
var Css = función(e,o){
para (var i en o)
e.estilo[i] = o[i];
};
var Extender = función (destino, fuente) {
para (propiedad var en fuente) {
destino[propiedad] = fuente[propiedad];
}
};
var Bind = función (objeto, diversión) {
var args = Array.prototype.slice.call(argumentos).slice(2);
función de retorno() {
return fun.apply(objeto, argumentos);
}
};
var BindAsEventListener = función (objeto, diversión) {
var args = Array.prototype.slice.call(argumentos).slice(2);
función de retorno (evento) {
return fun.apply(objeto, [evento || ventana.evento].concat(args));
}
};
var EstiloActual = función(elemento){
devolver elemento.currentStyle || document.defaultView.getComputedStyle(elemento, nulo);
};
función agregarListener(elemento,e,fn){
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
función removeListener(elemento,e,fn){
elemento.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("activado" + e,fn)
};
var Clase = función(propiedades){
var _class = function(){return (argumentos[0]!== null && this.initialize && typeof(this.initialize) == 'función')? this.initialize.apply(this, argumentos): this;};
_class.prototype = propiedades;
devolver _clase;
};
var Cambiar tamaño =nueva clase({
inicializar: función (obj) {
this.obj = obj;
this.resizeelm = nulo;
this.fun = nulo; //记录触发什么事件的索引
this.original = []; //记录开始状态的数组
this.width = nulo;
this.height = nulo;
this.fR = BindAsEventListener(this,this.resize);
this.fS = Bind(this,this.stop);
},
conjunto: función (olmo, dirección) {
si(!olmo)regresar;
this.resizeelm = olmo;
addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[dirección]));
devolver esto;
},
inicio: función(e,diversión){
this.fun = divertido;
this.original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.obj).height),parseInt(CurrentStyle(this.obj).left),parseInt(CurrentStyle(this.obj). arriba)];
este.ancho = (este.original[2]||0) + este.original[0];
esta.altura = (este.original[3]||0) + este.original[1];
addListener(documento,"mousemove",this.fR);
addListener(documento,'mouseup',this.fS);
},
cambiar el tamaño: función (e) {
this.fun(e);
Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()})
},
detener: función(){
removeListener(documento, "mousemove", this.fR);
removeListener(documento, "mousemove", this.fS);
ventana.getSelection? ventana.getSelection().removeAllRanges() : document.selection.empty();
},
arriba: función(e){
this.height>e.clientY?Css(this.obj,{arriba:e.clientY + "px",height:this.height-e.clientY + "px"}):this.turnDown(e);
},
abajo: función (e) {
e.clientY>this.original[3]?Css(this.obj,{top:this.original[3]+'px',height:e.clientY-this.original[3]+'px'}): this.turnUp(e);
},
izquierda: función(e){
e.clientX<this.width?Css(this.obj,{izquierda:e.clientX +'px',width:this.width-e.clientX + "px"}):this.turnRight(e);
},
derecha: función(e){
e.clientX>this.original[2]?Css(this.obj,{izquierda:this.original[2]+'px',width:e.clientX-this.original[2]+"px"}): this.turnLeft(e);
},
izquierdaArriba:función(e){
esto.arriba(e);esto.izquierda(e);
},
izquierdaAbajo:función(e){
this.left(e);this.down(e);
},
derechaArriba:función(e){
this.up(e);this.right(e);
},
derechaAbajo:función(e){
this.right(e);this.down(e);
},
girar hacia abajo: función (e) {
Css(this.obj,{arriba:this.height+'px',height:e.clientY - this.height + 'px'});
},
TurnUp: función (e) {
Css(this.obj,{arriba: e.clientY +'px',altura: this.original[3] - e.clientY +'px'});
},
girar a la derecha: función (e) {
Css(this.obj,{izquierda:this.width+'px',width:e.clientX- this.width +'px'});
},
girar a la izquierda: función (e) {
Css(this.obj,{izquierda:e.clientX +'px',width:this.original[2]-e.clientX+'px'});
}
});
ventana.onload = función(){
nuevo Resize($('ss')).set($('rUp'),'arriba').set($('rDown'),'down').set($('rLeft'),'izquierda' ).set($('rDerecha'),'derecha').set($(' rLeftUp'),'leftUp').set($('rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp') ;
}
</script>
</cuerpo>
</html>