複製程式碼 程式碼如下: Resize <br>#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ <br>position:absolute;background:#C00;width:6px;height:6px;z-index:5;font-size:0;} <br>#rLeftDown,#rRightUp{cursor:ne-resize;} <br>#rRightDown,#rLeftUp{cursor:nw-resize;} <br>#rRight,#rLeft{cursor:e-resize;} <br>#rUp,#rDown{cursor:n-resize;} <br>#rRightDown{ bottom:-3px; right:-3px;} <br>#rLeftDown{ bottom:-3px; left:-3px;} <br>#rRightUp{ top:-3px; right:-3px;} <br>#rLeftUp{ top:-3px; left:-3px;} <br>#rRight{ right:-3px; top:50%} <br>#rLeft{ left:-3px; top:50%} <br>#rUp{ top:-3px; left:50%} <br>#rDown{ bottom:-3px; left:50%} <br> <br>var Sys = (function(ua){ <br> var s = {}; <br> s.IE = ua.match(/msie ([\d.]+)/)?true:false; <br> s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; <br> s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; <br> s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; <br> s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; <br> s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; <br> return s; <br>})(navigator.userAgent.toLowerCase()); <p>var $ = function (id) { <br> return document.getElementById(id); <br>};</p> <p>var Css = function(e,o){ <br> for(var i in o) <br> e.style[i] = o[i]; <br>};</p> <p>var Extend = function(destination, source) { <br> for (var property in source) { <br> destination[property] = source[property]; <br> } <br>};</p> <p>var Bind = function(object, fun) { <br> var args = Array.prototype.slice.call(arguments).slice(2); <br> return function() { <br> return fun.apply(object, args); <br> } <br>};</p> <p>var BindAsEventListener = function(object, fun) { <br> var args = Array.prototype.slice.call(arguments).slice(2); <br> return function(event) { <br> return fun.apply(object, [event || window.event].concat(args)); <br> } <br>};</p> <p>var CurrentStyle = function(element){ <br> return element.currentStyle || document.defaultView.getComputedStyle(element, null); <br>};</p> <p>function addListener(element,e,fn){ <br> element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); <br>}; <br>function removeListener(element,e,fn){ <br> element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn) <br>};</p> <p>var Class = function(properties){ <br> var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; <br> _class.prototype = properties; <br> return _class; <br>};</p> <p>var Resize =new Class({ <br> initialize : function(obj){ <br> this.obj = obj; this.fun = null; //記錄觸發何種事件的索引<br> this.original = []; // 記錄開始狀態的倉庫<br> this.width = null this.fR = BindAsEventListener(this ,this.resize); <br> this.fS = 綁定(this,this.stop); <br> }, <br> set : 函數(elm,方向){ <br> if(!elm)return; > this.resizeelm = elm; <br> addListener(this.resizeelm,'mousedown',BindAsEventListener, 🎜 > this.fun = fun; <br> this.original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.AftStyobj),width),parseInt(CurrentStyle(this.S).Tobj),a). ,parseInt(CurrentStyle(this.obj).top)];<br> this.width = (this.original[2]||0) this.original[0] <br> 3]||0) this.original[1]; <br> addListener(document,"mousemove",this.fR); <br> addListener(document,'mouseup',this.fS); <br> }, <br> 調整大小：函數(e){ <br> this.fun(e); <br> Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this fS()}) <br>, , stop : function(){ <br> removeListener(document, "mousemove", this.fR); <br> removeListener(document, "mousemove", this.fS); <br> window.getSelection ？ window.getSelection().removeAllRanges() : document.selection.empty(); <br> }, <br> up : function(e){ <br> this.height>e.clientY?Css(this.obj,{top:.clientY.",height. clientY "px"}):this.turnDown(e); <br> }, <br> down : function(e){ <br> e.clientY>this.original[3]?Css(this.objinal:{top: 'thisoriginal:this.original[3]?Css(this.obj:{top: 'this. e.clientY-this.original[3] 'px'}):this.turnUp(e); <br> }, <br> left : function(e){ <br> e.clientX<this.width clientx> }, <br> right : function(e){ <br> e.clientX>this.original[2]?Css(this.objinal,{left e.clientX>this.original[2]?Css(this.obj,{left:thisworiginal]widw] e.clientX-this.original[2] "px"}):this.turnLeft(e) ; <br> }, <br> leftUp:function(e){ <br> this.up(e);this.left(e); <br> }, <br> leftDown:function(e){ <br> this.left(e);this.down(e); <br> }, <br> rightUp:function(e){ <br> this.up(e);this.right(e); <br> }, <br> rightDown:function(e){ <br> this.right(e);this.down(e); <br> }, 中關閉 : function(e){ <br> height: 'px'}); <br> }, <br> TurnUp : function(e){ <br> Css(this.obj,{top : e.clientY 'px',height Css(this.obj,{top : e.clientY 'px',height Css(this.obj,{top : e.clientY 'px',height clio. )； <br> }, <br> TurnRight : function(e){ <br> C(this.obj,{left:this.width 'px',cliwidth:ss(this.obj,{left:this.width 'px',cliwidth:ss.ss(this.obj,{left:this.width 'px',cliwidth:.ss(this.obj,{left:this.width 'px',cliwidth:.ss(this.obj,{left:this.width 'px',cliwidth:.ss(this.objid)。 <br> }, <br> 向左轉 : function(e){ <br> Css(this.obj,{left:e.clientX 'px',width:this.original[2]-e.cliclientX 'px'}); <br> } <br>}); <br>window.onload = function(){ <br> new Resize($('ss')).set($('rUp'),'up').set($('rDown'),'down ').set($('rLeft'),'left').set($('rRight'),'right').set($('rLeftUp'),'leftUp').set($(' rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp');<br>} <br>; <br>身體> <br></this.width></p> </div>
