Page 1/4 of JavaScript image magnifiers (drag-and-drop and zoom effects)

A few days ago, when I suddenly wanted to create a lens effect, I suddenly thought of this effect. So I decided to find out the code of "treasure" in the past and I tried it.
Preface:
This program is mainly divided into three parts: layer drag and drop, layer scaling, image cutting (including Preview ).
The drag-and-drop in the middle layer is very common, and the layer scaling is a little difficult. The principle of image cutting is actually very simple.
However, I learned a lot of things that I didn't know before in the implementation process. I hope you can also learn things from them.
Principle:

Drag-and-drop Program]

The basic principle is very simple. If you do not know the code, you can understand it. For more information, see the articles related to yueda and BlueDestiny.

The following is a useful example:

Scope restriction]

First of all, there are drag-and-drop range parameters, which are mxLeft (left minimum value on the left), mxRight (left maximum value on the right), and mxTop (top minimum value on the top) and mxBottom (the maximum value below ).
Then, you can see whether the value exceeds the limit by dragging the program Move (). If the value exceeds the limit, you can set it back to the limit value:
Copy codeThe Code is as follows:
If (this. Limit ){
// Obtain the length exceeding the limit
Var iRight = iLeft + this. _ obj. offsetWidth-this. mxRight, iBottom = iTop + this. _ obj. offsetHeight-this. mxBottom;
// Set the lower part on the right and the upper part on the left, which may be inaccurate.
If (iRight> 0) iLeft-= iRight;
If (iBottom> 0) iTop-= iBottom;
If (this. mxLeft> iLeft) iLeft = this. mxLeft;
If (this. mxTop> iTop) iTop = this. mxTop;
}

[Release selection]
The method I used previously was to set the external userselect of onselectstart and ff of ie,
But BlueDestiny says, "using user-select will be equivalent to event. preventDefault. Blocking the default action will cause the loss of mouseup during some operations .",
The best way is to use document. selection. empty () for ie, and use window. getSelection (). removeAllRanges () for ff ().
Therefore, you can add the following to Move:

Window. getSelection & window. getSelection (). removeAllRanges.
Because ie's Mouse capture takes this by default (as described below), ie does not need to be used.
Mouse capture]

I didn't know that js had this in the past. It was easy to use:
Set Capture: this. Drag. setCapture ();
Cancel Capture: this. Drag. releaseCapture ().
It is used to set the Mouse capture to the specified object. This object receives all mouse input for the current application or the entire system.
If you still don't understand it, try dragging the mouse out of the browser and you will find that the drag continues,
If you do not have this mouse capture, it will become invalid.
But it cannot trigger mouseup outside the browser, but it can also be replaced by the losecapture event:

AddEventHandler (this. Drag, "losecapture", this. _ fS );
This. Drag. setCapture ();
The event that stops when the blur is added to the ff window in the program. The more rabbit said, It is perfect to detect the loss of mouseup caused by alt + tab.

Such a drag-and-drop program is complete.