Jquery's ideas and code for realizing picture magnifying glass effect (self-written)_jquery

There are a lot of restrictions on the Internet, and the documents are difficult to understand, and it is troublesome ~ I wrote one myself. Laughing

Algorithm:

Step 1:

The position of the enlarged picture = the width or height of the container where the mouse is located divided by the container itself Height and width, find the percentage of the mouse moving in the container

Part 2:

After getting the percentage

x=-(x percentage* The width of the image - the width of the display container/2);

y=-(y percentage * the height of the image - the height of the display container/2);

Two parameters, x and y , which is the position of the large picture. The size of the display container/2 is added at the end to ensure that the picture is displayed in the middle.

Rendering:

Code:

• 8


• 7


• 6


• 5


• 3


• 3


• 2