var $ = function (id) {
return "string" == typeof id ? (id) : id;
};
var isIE = () ? true : false;
function addEventHandler(oTarget, sEventType, fnHandler) {
if () {
(sEventType, fnHandler, false);
} else if () {
("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if () {
(sEventType, fnHandler, false);
} else if () {
("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
var Class = {
create: function() {
return function() {
(this, arguments);
}
}
}
= function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//Drag and drop program
var Drag = ();
= {
//Drag and drop the object, trigger the object
initialize: function(obj, drag, options) {
var oThis = this;
this._obj = $(obj);//Drag and drop object
= $(drag);//Trigger object
this._x = this._y = 0;//Record the position of the mouse relative to the drag and drop object
//Event object (used to remove events)
this._fM = function(e){ ( || e); }
this._fS = function(){ (); }
(options);
= !!;
= parseInt();
= parseInt();
= parseInt();
= parseInt();
= ;
this._obj. = "absolute";
addEventHandler(, "mousedown", function(e){ ( || e); });
},
//Set default properties
SetOptions: function(options) {
= {//Default value
Limit: false, // Whether to set the limit (when true, the following parameters are useful, and can be negative)
mxLeft: 0,//Left limit
mxRight: 0,//Right limit
mxTop: 0,//The upper limit
mxBottom: 0,//The limit below
onMove: function(){}//Execute when moving
};
(, options || {});
},
//Prepare to drag
Start: function(oEvent) {
//Record the position of the mouse relative to the drag and drop object
this._x = - this._obj.offsetLeft;
this._y = - this._obj.offsetTop;
//Mousemove when moving
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
//Can release the mouse when moving outside the window
if(isIE){
addEventHandler(, "losecapture", this._fS);
();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//drag
Move: function(oEvent) {
//Clear the selection (Eie set to capture this by default)
&& ().removeAllRanges();
//The current mouse position is minus the relative drag and drop object position to get the offset position
var iLeft = - this._x, iTop = - this._y;
//Set range limit
if(){
//Get out of length
var iRight = iLeft + this._obj.offsetWidth - , iBottom = iTop + this._obj.offsetHeight - ;
// Here you first set the right bottom and then the left top, which may be inaccurate.
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if( > iLeft) iLeft = ;
if( > iTop) iTop = ;
}
//Set the location
this._obj. = iLeft + "px";
this._obj. = iTop + "px";
//Additional program
();
},
//Stop dragging
Stop: function() {
//Remove event
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(, "losecapture", this._fS);
();
}else{
removeEventHandler(window, "blur", this._fS);
}
}
};
//Scaling program
var Resize = ();
= {
//Scaling object
initialize: function(obj, options) {
var oThis = this;
this._obj = $(obj);//Scaling object
this._right = this._down = this._left = this._up = 0;//Coordinate parameters
this._scale = 1;//Scale parameter
this._touch = null;//The current trigger object
//Get the final style with currentStyle (ff with getComputedStyle)
var _style = this._obj.currentStyle || (this._obj, null);
this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
//Event object (used to remove events)
this._fR = function(e){ (e); }
this._fS = function(){ (); }
(options);
= !!;
= parseInt();
= parseInt();
= parseInt();
= parseInt();
= parseInt();
= parseInt();
= !!;
= ;
this._obj. = "absolute";
},
//Set default properties
SetOptions: function(options) {
= {//Default value
Limit: false, // Whether to set the limit (when true, the following mx parameters are useful)
mxLeft: 0,//Left limit
mxRight: 0,//Right limit
mxTop: 0,//The upper limit
mxBottom: 0,//The limit below
MinWidth: 50,//Minimum width
MinHeight: 50,//Minimum height
Scale: false, // Whether to scale
onResize: function(){}//Execute when scaling
};
(, options || {});
},
//Set the trigger object
Set: function(resize, side) {
var oThis = this, resize = $(resize), _fun, _cursor;
if(!resize) return;
//Set according to the direction _fun is the program executed when scaling _cursor is the mouse style
switch (()) {
case "up" :
_fun = function(e){ if(){ (e); }else{ (e); } };
_cursor = "n-resize";
break;
case "down" :
_fun = function(e){ if(){ (e); }else{ (e); } };
_cursor = "n-resize";
break;
case "left" :
_fun = function(e){ if(){ (e); }else{ (e); } };
_cursor = "e-resize";
break;
case "right" :
_fun = function(e){ if(){ (e); }else{ (e); } };
_cursor = "e-resize";
break;
case "left-up" :
_fun = function(e){ if(){ (e); }else{ (e); (e); } };
_cursor = "nw-resize";
break;
case "right-up" :
_fun = function(e){ if(){ (e); }else{ (e); (e); } };
_cursor = "ne-resize";
break;
case "left-down" :
_fun = function(e){ if(){ (e); }else{ (e); (e); } };
_cursor = "ne-resize";
break;
case "right-down" :
default :
_fun = function(e){ if(){ (e); }else{ (e); (e); } };
_cursor = "nw-resize";
}
//Insert characters to solve the problem of capturing effects under ff
if(!isIE){ = "<font size='1px'> </font>"; }
//Set the trigger object
= _cursor;
addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; ( || e); });
},
//Prepare to zoom
Start: function(oEvent, o) {
//Prevent bubbles
if(isIE){ = true; } else { (); }
// Calculate the initial value of the style
this.style_width = this._obj.offsetWidth;
this.style_height = this._obj.offsetHeight;
this.style_left = this._obj.offsetLeft;
this.style_top = this._obj.offsetTop;
//Set the scaling ratio
if(){ this._scale = this.style_width / this.style_height; }
// Calculate the coordinates of the current edge corresponding to the other edge, for example, when scaling the right side, you need the left boundary coordinates.
this._left = - this.style_width;
this._right = + this.style_width;
this._up = - this.style_height;
this._down = + this.style_height;
//If there is a range, first calculate the maximum width and height within the range
if(){
this._mxRight = - this._obj.offsetLeft;
this._mxDown = - this._obj.offsetTop;
this._mxLeft = + this.style_width + this._obj.offsetLeft;
this._mxUp = + this.style_height + this._obj.offsetTop;
}
//Scaling when mousemove stops when mouseup
addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
//Can release the mouse when moving outside the window
if(isIE){
addEventHandler(this._touch, "losecapture", this._fS);
this._touch.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//Zoom
Resize: function(e) {
//If the object is not triggered, return
if(!this._touch) return;
//Clear the selection (Eie set to capture this by default)
&& ().removeAllRanges();
//Execute the scaling program
this._fun( || e);
//Set style
//Because the offset used for calculation is to calculate the border, so you need to subtract it
this._obj. = this.style_width - this._xBorder + "px";
this._obj. = this.style_height - this._yBorder + "px";
this._obj. = this.style_top + "px";
this._obj. = this.style_left + "px";
//Additional program
();
},
//Normal zoom
//right
SetRight: function(oEvent) {
//The current coordinate position is minus the coordinate on the left equals the current width
( - this._left);
},
//below
SetDown: function(oEvent) {
( - this._up);
},
//left
SetLeft: function(oEvent) {
//The coordinates on the right minus the current coordinate position is equal to the current width
(this._right - );
},
//Above
SetUp: function(oEvent) {
(this._down - );
},
//Scaling
//Scaling the lower right
scaleRightDown: function(oEvent) {
//Calculate the width first and then calculate the height according to the proportion, and finally calculate the width based on the determined height (width priority)
(oEvent);
(parseInt(this.style_width / this._scale));
(parseInt(this.style_height * this._scale));
},
//Scaling the lower left
scaleLeftDown: function(oEvent) {
(oEvent);
(parseInt(this.style_width / this._scale));
(parseInt(this.style_height * this._scale));
},
//Scaling top right
scaleRightUp: function(oEvent) {
(oEvent);
(parseInt(this.style_width / this._scale));
(parseInt(this.style_height * this._scale));
},
//Scaling top left
scaleLeftUp: function(oEvent) {
(oEvent);
(parseInt(this.style_width / this._scale));
(parseInt(this.style_height * this._scale));
},
//Here is highly preferred for both sides of the upper and lower (the experience is better)
//Scaling down the right
scaleDownRight: function(oEvent) {
(oEvent);
(parseInt(this.style_height * this._scale));
(parseInt(this.style_width / this._scale));
},
//Scaling up to the right
scaleUpRight: function(oEvent) {
(oEvent);
(parseInt(this.style_height * this._scale));
(parseInt(this.style_width / this._scale));
},
//Revise the procedure
//Fix the right side
repairRight: function(iWidth) {
//Just set the width and height on the right and bottom
//When less than the minimum width
if (iWidth < ){ iWidth = ; }
//When the maximum width is exceeded
if( && iWidth > this._mxRight){ iWidth = this._mxRight; }
//Modify the style
this.style_width = iWidth;
},
//Correction below
repairDown: function(iHeight) {
if (iHeight < ){ iHeight = ; }
if( && iHeight > this._mxDown){ iHeight = this._mxDown; }
this.style_height = iHeight;
},
//Fix the left
repairLeft: function(iWidth) {
//The left and top are more troublesome because you also need to calculate left and top
//When less than the minimum width
if (iWidth < ){ iWidth = ; }
//When the maximum width is exceeded
else if( && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
//Modify the style
this.style_width = iWidth;
this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
},
//Correction above
repairUp: function(iHeight) {
if(iHeight < ){ iHeight = ; }
else if( && iHeight > this._mxUp){ iHeight = this._mxUp; }
this.style_height = iHeight;
this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
},
//Stop zoom
Stop: function() {
//Remove event
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._touch, "losecapture", this._fS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
this._touch = null;
}
};
//Picture cutting
var ImgCropper = ();
= {
//Container object, drag and drop zoom object, image address, width, height
initialize: function(container, drag, url, width, height, options) {
var oThis = this;
//Container object
= $(container);
= "relative";
= "hidden";
//Drag and drop object
= $(drag);
= "move";
= 200;
if(isIE){
//Set overflow to solve the rendering problem of ie6 (the problem of filling the object height when scaling)
= "hidden";
//Fill the drag and drop object with a transparent layer under ie. If it is not filled, onmousedown will fail (unknown reason)
(function(style){
= = "100%"; = "#fff"; = "alpha(opacity:0)";
})((("div")).style)
}else{
//Insert characters to solve the problem of capture failure under ff
+= "<font size='1px'> </font>";
}
this._pic = (("img"));//Pic object
this._cropper = (("img"));//Cut the object
this._pic. = this._cropper. = "absolute";
this.pic. = this.pic. = this.cropper. = the.cropper. = "0";//Align
this._cropper. = 100;
this._cropper.onload = function(){ (); }
= url;//Picture address
= parseInt(width);//width
= parseInt(height);//height
(options);
= parseInt();
= parseInt();
= parseInt();
= parseInt();
= parseInt();
//Set preview object
= $() || null;//Preview object
= parseInt();
= parseInt();
this._view = null;//Preview image object
if(){
= "relative";
= "hidden";
this._view = (("img"));
this._view. = "absolute";
}
= parseInt();
//Set drag and drop
this._drag = new Drag(, , { Limit: true, onMove: function(){ (); } });
//Set zoom
this._resize = ();
();
},
//Set default properties
SetOptions: function(options) {
= {//Default value
Opacity: 50, //Transparency (0 to 100)
//Drag and drop position and width and height
dragTop: 0,
dragLeft: 0,
dragWidth: 100,
dragHeight: 100,
//Scaling trigger object
Right: "",
Left: "",
Up: "",
Down: "",
RightDown: "",
LeftDown: "",
RightUp: "",
LeftUp: "",
Scale: false, // Whether to scale
//Preview object settings
View: "",//Preview object
viewWidth: 100,//Preview width
viewHeight: 100//Preview height
};
(, options || {});
},
//Initialize the object
Init: function() {
var oThis = this;
//Set the container
= + "px";
= + "px";
//Set drag and drop objects
= + "px";
= + "px";
= + "px";
= + "px";
//Set the cutting object
this._pic.src = this._cropper.src = ;
this._pic. = this._cropper. = + "px";
this._pic. = this._cropper. = + "px";
if(isIE){
this._pic. = "alpha(opacity:" + + ")";
} else {
this._pic. = / 100;
}
//Set preview object
if(){ this._view.src = ; }
//Set drag and drop
this._drag.mxRight = ; this._drag.mxBottom = ;
//Set zoom
if(this._resize){ this._resize.mxRight = ; this._resize.mxBottom = ; this._resize.Scale = ; }
},
//Set to get the zoom object
GetResize: function() {
var op = ;
//Set only when there is a trigger object
if( || || || || || || || ){
var oThis = this, _resize = new Resize(, { Limit: true, onResize: function(){ (); } });
//Set the zoom trigger object
if(){ _resize.Set(, "right-down"); }
if(){ _resize.Set(, "left-down"); }
if(){ _resize.Set(, "right-up"); }
if(){ _resize.Set(, "left-up"); }
if(){ _resize.Set(, "right"); }
if(){ _resize.Set(, "left"); }
if(){ _resize.Set(, "up"); }
if(){ _resize.Set(, "down"); }
return _resize;
} else { return null; }
},
//Set cutting
SetPos: function() {
var o = ;
//Cut the parameters of the drag and drop object to cut
this._cropper. = "rect(" + + "px " + ( + ) + "px " + ( + ) + "px " + + "px)";
//Cutting preview
if() ();
},
//Cutting preview
PreView: function() {
//Set width and height according to proportion
var o = , h = , w = h * / ;
if(w > ){ w = ; h = w * / ; }
//Get the corresponding proportional size
var scale = h / , ph = * scale, pw = * scale, pt = * scale, pl = * scale, styleView = this._view.style;
//Set style
= pw + "px"; = ph + "px";
= - pt + "px "; = - pl + "px";
//Cutting preview picture
= "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
}
}