Javascript code _ javascript tips

This article mainly introduces how to change the div size by dragging JavaScript with eight points. If you need it, you can refer to it for help. The Code is as follows:

Resize

Script
Var Sys = (function (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 .exe c (navigator. userAgent)] [0] [1] = 6 ))? True: false;
S. IE7 = (s. IE & ([/MSIE (\ d )\. 0/I .exe c (navigator. userAgent)] [0] [1] = 7 ))? True: false;
S. IE8 = (s. IE & ([/MSIE (\ d )\. 0/I .exe c (navigator. userAgent)] [0] [1] = 8 ))? True: false;
Return s;
}) (Navigator. userAgent. toLowerCase ());

Var $ = function (id ){
Return document. getElementById (id );
};

Var Css = function (e, o ){
For (var I in o)
E. style [I] = o [I];
};

Var Extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
};

Var Bind = function (object, fun ){
Var args = Array. prototype. slice. call (arguments). slice (2 );
Return function (){
Return fun. apply (object, args );
}
};

Var BindAsEventListener = function (object, fun ){
Var args = Array. prototype. slice. call (arguments). slice (2 );
Return function (event ){
Return fun. apply (object, [event | window. event]. concat (args ));
}
};

Var CurrentStyle = function (element ){
Return element. currentStyle | document. defaultView. getComputedStyle (element, null );
};

Function addListener (element, e, fn ){
Element. addEventListener? Element. addEventListener (e, fn, false): element. attachEvent ("on" + e, fn );
};
Function removeListener (element, e, fn ){
Element. removeEventListener? Element. removeEventListener (e, fn, false): element. detachEvent ("on" + e, fn)
};

Var Class = function (properties ){
Var _ class = function () {return (arguments [0]! = Null & this. initialize & typeof (this. initialize) = 'function ')? This. initialize. apply (this, arguments): this ;};
_ Class. prototype = properties;
Return _ class;
};

Var Resize = new Class ({
Initialize: function (obj ){
This. obj = obj;
This. resizeelm = null;
This. fun = null; // record the index of the event triggered
This. original = []; // array of the record start status
This. width = null;
This. height = null;
This. fR = BindAsEventListener (this, this. resize );
This. fS = Bind (this, this. stop );
},
Set: function (elm, direction ){
If (! Elm) return;
This. resizeelm = elm;
AddListener (this. resizeelm, 'mousedown', BindAsEventListener (this, this. start, this [ction]);
Return this;
},
Start: function (e, fun ){
This. fun = fun;
This. original = [parseInt (CurrentStyle (this. obj ). width), parseInt (CurrentStyle (this. obj ). height), parseInt (CurrentStyle (this. obj ). left), parseInt (CurrentStyle (this. obj ). top)];
This. width = (this. original [2] | 0) + this. original [0];
This. height = (this. original [3] | 0) + this. original [1];
AddListener (document, "mousemove", this. fR );
AddListener (document, 'mouseup', this. fS );
},
Resize: function (e ){
This. fun (e );
Sys. IE? (This. resizeelm. onlosecapture = function () {this. fS ()}) :( this. resizeelm. onblur = function () {this. fS ()})
},
Stop: function (){
RemoveListener (document, "mousemove", this. fR );
RemoveListener (document, "mousemove", this. fS );
Window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty ();
},
Up: function (e ){
This. height> e. clientY? Css (this. obj, {top: e. clientY + "pixel", height: this. height-e.clientY + "px"}): this. turnDown (e );
},
Down: function (e ){
E. clientY> this. original [3]? Css (this. obj, {top: this. original [3] + 'px ', height: e. clientY-this.original [3] + 'px '}): this. turnUp (e );
},
Left: function (e ){
E. clientX },
Right: function (e ){
E. clientX> this. original [2]? Css (this. obj, {left: this. original [2] + 'px ', width: e. clientX-this.original [2] + "px"}): this. turnLeft (e );
},
LeftUp: function (e ){
This. up (e); this. left (e );
},
LeftDown: function (e ){
This. left (e); this. down (e );
},
RightUp: function (e ){
This. up (e); this. right (e );
},
RightDown: function (e ){
This. right (e); this. down (e );
},
TurnDown: function (e ){
Css (this. obj, {top: this. height + 'px ', height: e. clientY-this. height + 'px '});
},
TurnUp: function (e ){
Css (this. obj, {top: e. clientY + 'px', height: this. original [3]-e. clientY + 'px '});
},
TurnRight: function (e ){
Css (this. obj, {left: this. width + 'px ', width: e. clientX-this. width + 'px '});
},
TurnLeft: function (e ){
Css (this. obj, {left: e. clientX + 'px', width: this. original [2]-e. clientX + 'px '});
}
});
Window. onload = function (){
New Resize ($ ('ss ')). set ($ ('rule'), 'up '). set ($ ('rlow'), 'low '). set ($ ('rleft'), 'left '). set ($ ('rright'), 'right '). set ($ ('rleftup'), 'leftup '). set ($ ('rleftdown '), 'leftdown '). set ($ ('rightlist'), 'rightdetail '). set ($ ('rightup'), 'rightup ');
}
Script