Enlarge the image details and display the page details

Enlarge the image details and display the page details

In many e-commerce product display pages, the product details can be enlarged. Here, based on the main principle, css and js are used to achieve this effect:
Implementation principle:
1. Select two images with the same content and different sizes. One is a small image to be selected, and the other is a large image to show details.

2. If you want to see "select the details of a small image", the "details of the same part of the large image" will be displayed. Here the proportion problem is involved, that is, in the small image,
The size of the details selected by the mouse is equal to the length/width ratio of the entire small image. It must be consistent with the length/width ratio of the area displayed in the large image, so that the effect will be realistic,
For example:

The formula h1/h2 = h3/h4; w1/w2 = w3/w4 can be obtained based on equal proportions.
Because the length and width of the image have been fixed at the time of selection, the size of the floating layer on the small image needs to be changed according to the proportion.

3. When you move the mouse over a small image, the image will be moved in the display area according to the proportion.

Source code display:

1 <! Doctype html> 2 
View results: