模擬商品觸碰產生放大效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid #ccc;
width: 300px;
height: 300px;
position: relative;
margin-top: 10px;
margin-left: 10px;
}
.box img {
width: 300px;
height: 300px;
}
.mask {
width: 200px;
height: 200px;
background-color: rgba(248, 238, 35, 0.3);
position: absolute;
display: none;
border: none;
cursor: move;
left: 0;
top: 0;
}
.larger {
width: 500px;
height: 500px;
position: absolute;
left: 313px;
top: 10px;
display: none;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
<img src="first.jpg" alt="">
</div>
<div class="larger">
<img src="first.jpg" alt="">
</div>
<script>
let mask = document.querySelector('.mask');
let box = document.querySelector('.box');
let larger = document.querySelector('.larger');
let largerImg = larger.children[0];
//鼠標移入事件
box.addEventListener('mouseover', function() {
mask.style.display = 'block';
larger.style.display = 'block';
});
//鼠標移出事件
box.addEventListener('mouseleave', function() {
mask.style.display = 'none';
larger.style.display = 'none';
});
//鼠標移動事件
box.addEventListener('mousemove', function(e) {
//獲取獲取鼠標此時文檔的橫縱座標，去掉父親的margin
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
//求蒙版都父親的距離
x = x - mask.offsetWidth / 2;
y = y - mask.offsetHeight / 2;
//設置橫縱座標最小值
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
//設置橫縱座標的最大值
x = x > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : x;
y = y > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : y;
//蒙版 位置賦值
mask.style.left = x + "px";
mask.style.top = y + "px";
//遮擋層的移動距離/大圖的移動距離=遮擋層移動的最大距離/大圖最大的移動距離
//大圖的移動距離=遮擋層的移動距離*大圖最大的移動距離/遮擋層移動的最大距離
//大圖移動的最大距離
let maxX = largerImg.offsetWidth - larger.offsetWidth;
let maxY = largerImg.offsetHeight - larger.offsetHeight;
//求大圖的移動距離
let maxImgX = x * maxX / (box.offsetWidth - mask.offsetWidth);
let maxImgY = y * maxY / (box.offsetHeight - mask.offsetHeight);
largerImg.style.marginLeft = -maxImgX + 'px';
largerImg.style.marginTop = -maxImgY + 'px';
});
</script>
</body>
</html>
效果圖：
