Page 1/4 of JavaScript image cutting effect (magnifiers)

In the previous version, this type of effect was first introduced, and three major functions were developed together with limited capabilities. Therefore, only the effect was achieved.
Recently, I have studied the drag-and-drop effect and zoom effect separately. After finishing and improving the effect, I can apply the cutting effect again. I personally feel that the effect is already good.
It should be noted that this is only an effect, and it is not really a cut image. To obtain a true cut image, please refer to the image cutting system.
For more information, see here.
Download complete instance
Code Too many messages cannot be posted, so you have to give one:

Program description

This effect consists of three parts: drag-and-drop of layers, layer scaling, and image cutting (including Preview ).
Here, the drag and drop of layers and the layer scaling are already in the other two articles.ArticleFor more information, see image cutting.

Image Cutting

There are three ways to design image cutting:

Setting an image as a background image is achieved by setting the position of the background image. However, the disadvantage is that the image can only be scaled according to the normal proportion of the image, which is not flexible enough;
Put the image into the cutting object and implement it by setting the top and left of the image. This method is feasible, but the following is a simpler method;
Set the clip of the image.
Here we will introduce the implementation method of method 3, which we can see from the code of "Collection" in that year. Let's talk about clip first:
Clip is used to "retrieve or set the visible area of an object. The parts outside the visible area are transparent ."
Based on the order of Top-right-bottom-left, four offset values calculated from the () coordinate in the upper left corner of the object are provided to cut.
For example:Copy codeCode: div {position: absolute; width: 60px; Height: 60px; clip: rect (0 20 50 10 );}

Note position: the settings of absolute are required (read the manual for details ).
The following describes the implementation principles:

First, a container (_ container) is required. Three layers are inserted in the container:

Bottom layer (_ laybase): the translucent image;
Cut layer (_ laycropper): the part that is normally displayed;
Control layer (_ layhandle): the part that controls the display.
For the bottom layer and cut layerProgramThe control layer is a self-defined layer (a DIV in the program) for automatically created images ).
The bottom layer and the cut layer must completely overlap. in the program, the two layers are absolutely located in the upper left corner:Copy codeThe Code is as follows: This. _ laybase. style. top = This. _ laybase. style. left = This. _ laycropper. style. top = This. _ laycropper. style. left = 0;

set the order of layers to ensure the order of layers.