Внешний интерфейс: использование html+css+js для имитации эффекта увеличения области изображения продукта на JD.com.
1. Введение
Недавно, просматривая продукты на JD.com на веб-странице, я почувствовал, что специальные эффекты, реализованные на приведенном выше gif-изображении, были хорошими, поэтому я планировал использовать технологию html+css+js для реализации указанных выше специальных эффектов. эффект следующий:
2. Внешний интерфейс
В основном он использует такие знания, как плавающее, абсолютное позиционирование и относительное позиционирование.Читатели, которые не понимают эту часть знаний, могут сначала понять ее, а затем прочитать этот пост в блоге редактора. В начале реализации было много проблем.Наконец, рассмотрите возможность установки атрибута фонового изображения вместо непосредственного использования тега img. Мы знаем, что когда ширина и высота блока меньше размера его фонового изображения, будет отображаться только часть его фонового изображения.Если значение атрибута background -position не установлено , по умолчанию отображаемая часть изображения левый верхний угол фонового изображения. 
Среди них поля со значениями атрибутов класса small_img и big_img установлены на плавание влево, а small_img настроено на позиционирование как относительное позиционирование, а для отображения big_img установлено значение none (по умолчанию оно не отображается, и это отображается только при перемещении мыши в область изображения); атрибут класса Поле со значением «другое» устанавливается в абсолютное позиционирование, а его свойство отображения имеет значение «нет» (по умолчанию оно не отображается и отображается только при мышь перемещается в область изображения).
3. js для достижения эффекта движения мыши
Учитывая, что когда мышь перемещается в область изображения, мышь находится в центре другого поля Только когда положение мыши находится на краю области изображения, мышь не находится в центре другого поля. В некоторых случаях он находится в центре другого поля По этой причине мышь находится в small_img Положение поля используется для вынесения ряда суждений следующим образом
: на фоновом изображении small_img (и ширина, и высота 450 пикселей) и фоновом изображении big_img (и ширина, и высота 800 пикселей), хотя был сделан ряд суждений, но все еще есть некоторые случаи, когда суждение не будет Например, в крайнем случае, mouseX может соответствовать требованиям, но mouseY может не соответствовать условиям.Для этого начального условия x=mouseX, y=mouseY.
4. Реализуйте код
<!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>