Front-end: using html+css+js to imitate the zoom-in effect of the product image area on JD.com
1 Introduction
Recently, when browsing the products on JD.com on the web page, I felt that the special effects realized on the above gif image were good, so I planned to use html+css+js technology to realize the above special effects. My actual effect is as follows:
2. Front-end interface
It mainly uses knowledge such as floating, absolute positioning, and relative positioning. Readers who do not understand this part of the knowledge points can go to understand it first, and then read this blog post of the editor. At the beginning of the implementation, there were many problems. Finally, consider setting the background image attribute instead of using the img tag directly. We know that when the width and height of a box are smaller than the size of its background image, only part of its background image will be displayed. If the background -position attribute value is not set, by default, the displayed image part is the upper left corner of the background image. 
Among them, the boxes with class attribute values small_img and big_img are set to float left, and small_img is set to be positioned as relative positioning, and the display of big_img is set to none (it is not displayed by default, and it is only displayed when the mouse moves into the image area); the class attribute The box whose value is other is set to absolute positioning, and its display property value is none (it is not displayed by default, and it is only displayed when the mouse moves into the image area).
3. js to achieve the effect of mouse movement
Considering that when the mouse moves into the picture area, the mouse is in the center of the other box. Only when the mouse position is at the edge of the picture area, the mouse is not in the center of the other box. In other cases, it is in the center of the other box. For this reason, the mouse is in the small_img The position of the box is used to make a series of judgments, as follows:
Note that the code in the above picture is calculated based on the background image of small_img (both width and height are 450px) and the background image of big_img (both width and height are 800px), although A series of judgments have been made, but there are still some cases where the judgment will not be entered. For example, in an edge case, mouseX may meet the requirements, but mouseY may not meet the conditions. For this initial condition, x=mouseX, y=mouseY.
4. Implement the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东商城图片</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 900px;
height: 450px;
margin: 20px auto;
}
.main >div{
width: 450px;
height: 450px;
z-index: 2;
float: left;
}
.small_img{
background-image: url('https://img10.360buyimg.com/n1/s450x450_jfs/t1/211447/30/24860/68358/62e8fa30Ed16f2c10/3897f1eb3281d4cd.jpg');
position: relative;
}
.big_img{
display: none;
width: 400px !important;
height: 400px !important;
background-image: url('https://img10.360buyimg.com//n0/jfs/t1/211447/30/24860/68358/62e8fa30Ed16f2c10/3897f1eb3281d4cd.jpg');
background-repeat: no-repeat;
}
.other{
width: 225px;
height: 225px;
background-color: rgba(1, 1, 1, 0.2);
z-index: 3;
position: absolute;
cursor: move;
display: none;
}
</style>
</head>
<body>
<div class="main">
<div class="small_img">
<div class="other">
</div>
</div>
<div class="big_img">
</div>
</div>
</body>
<script type="text/javascript">
const small_img = document.querySelector('.small_img');
const other = document.querySelector('.other');
const big_img = document.querySelector('.big_img');
const a = 800 / 450 ;
small_img.onmouseover = ()=>{
other.style.display = 'block';
big_img.style.display = 'block';
small_img.onmousemove = (e) => {
let mouseX = e.clientX - small_img.getBoundingClientRect().left;
let mouseY = e.clientY - small_img.getBoundingClientRect().top;
let x = mouseX,y = mouseX;
if (mouseX < 112.5)
x = 0;
if (mouseY < 112.5)
y = 0;
if (mouseX > 450 - 112.5)
x = 225 + 'px';
if (mouseY > 450 - 112.5)
y = 225 + 'px';
if (mouseX >= 112.5 && mouseX <= 450 - 112.5)
x = mouseX - 112.5 + 'px';
if (mouseY >= 112.5 && mouseY <= 450 - 112.5)
y = mouseY - 112.5 + 'px';
other.style.left = parseFloat(x) + 'px';
other.style.top = parseFloat(y) + 'px';
big_img.style.backgroundPosition = `-${
parseFloat(x) * a}px -${
parseFloat(y) * a}px`;
}
}
small_img.onmouseout = () => {
other.style.display = 'none';
big_img.style.display = 'none';
}
</script>
</html>