js透過八個點 拖曳改變div大小的實作方法_javascript技巧

複製程式碼 程式碼如下:

<script> <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>var Css = function(e,o){ <BR> for(var i in o) <BR> e.style[i] = o[i]; <BR>}; <P>var Extend = function(destination, source) { <BR> for (var property in source) { <BR> destination[property] = source[property]; <BR> } <BR>}; <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>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>var CurrentStyle = function(element){ <BR> return element.currentStyle || document.defaultView.getComputedStyle(element, null); <BR>}; <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>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>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>, < ur=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?Css(this.obj,{left:e.clicliclip.x clientX "px"}):this.turnRight(e);         <BR>    }, <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></script>;
身體>