<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
body * {
margin: 0;
padding: 0;
}
#moveBox {
323px;
position: relative;
margin: 50px auto;
}
#mirror {
position: absolute;
overflow: hidden;
height: 100px;
100px;
/* border: 5px black solid; */
cursor: crosshair;
}
.maxImg {
position: absolute;
}
</style>
</head>
<body>
<div id="moveBox">
<div id="mirror">
<img
src="https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
class="maxImg"
/>
</div>
<div id="pic">
<img
src="https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
class="nowImg"
/>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var mirror = document.querySelector("#mirror");
var moveBox = document.querySelector("#moveBox");
var pic = document.querySelector("#pic");
var nowImg = document.querySelector(".nowImg");
var maxImg = document.querySelector(".maxImg");
var nowImgLeft = nowImg.getBoundingClientRect().left;
var nowImgTop = nowImg.getBoundingClientRect().top;
// 放大镜高
var mirrorHeight = mirror.offsetHeight;
// 放大镜宽
var mirrorWidth = mirror.offsetWidth;
var nowImgWidth = nowImg.offsetWidth;
var nowImgHeight = nowImg.offsetHeight;
var picHeight = document
.getElementById("pic")
.getElementsByTagName("img")[0].offsetHeight;
var picWidth = document
.getElementById("pic")
.getElementsByTagName("img")[0].offsetWidth;
var sacle = 2;
function moving(e) {
// 鼠标距离
var x = e.clientX - nowImgLeft;
var y = e.clientY - nowImgTop;
var xxx =
((x - mirrorWidth / 2) / nowImgWidth) * nowImgWidth * sacle +
(mirrorWidth / 2) * (sacle - 1);
var yyy =
((y - mirrorHeight / 2) / nowImgHeight) * nowImgHeight * sacle +
(mirrorHeight / 2) * (sacle - 1);
// 放大图片宽度
maxImg.style.width = nowImg.clientWidth * sacle + "px";
// 左边缘限制
if (
x - mirrorWidth / 2 < 0 &&
y - mirrorHeight / 2 > 0 &&
y + mirrorHeight / 2 < picHeight
) {
mirror.style.left = 0 + "px";
maxImg.style.top = "-" + yyy + "px";
mirror.style.top = y - mirrorHeight / 2 + "px";
// maxImg.style.left = 0 + "px"
}
// 上边缘限制
if (
y - mirrorHeight / 2 < 0 &&
x - mirrorWidth / 2 > 0 &&
x + mirrorWidth / 2 < picWidth
) {
mirror.style.top = 0 + "px";
maxImg.style.left = "-" + xxx + "px";
mirror.style.left = x - mirrorWidth / 2 + "px";
if (x - mirrorWidth / 2 < 0) {
mirror.style.left = 0 + "px";
}
}
// 右边缘限制
if (
x + mirrorWidth / 2 > picWidth &&
y + mirrorHeight / 2 < picHeight &&
y - mirrorHeight / 2 > 0
) {
mirror.style.left = picWidth - mirrorWidth + "px";
maxImg.style.top = "-" + yyy + "px";
mirror.style.top = y - mirrorHeight / 2 + "px";
}
// 下边缘限制
if (
y + mirrorHeight / 2 > picHeight &&
x + mirrorWidth / 2 < picWidth &&
x - mirrorWidth / 2 > 0
) {
mirror.style.top = picHeight - mirrorHeight + "px";
maxImg.style.left = "-" + xxx + "px";
mirror.style.left = x - mirrorWidth / 2 + "px";
}
if (
x <= picWidth &&
y <= picHeight &&
x >= -picWidth &&
y >= -picHeight
) {
changePosition(x, y);
}
}
function changePosition(x, y) {
if (
x + mirrorWidth / 2 < picWidth &&
y + mirrorWidth / 2 < picHeight &&
x - mirrorWidth / 2 > 0 &&
y - mirrorWidth / 2 > 0
) {
// mirror 放大镜
mirror.style.left = x - mirrorWidth / 2 + "px";
mirror.style.top = y - mirrorHeight / 2 + "px";
// const xxx = (x - 55) / 323 * 323 * sacle + 55 * (sacle - 1)
// const yyy = (y - 55) / 430 * 430 * sacle + 55 * (sacle - 1)
const xxx =
((x - mirrorWidth / 2) / nowImgWidth) * nowImgWidth * sacle +
(mirrorWidth / 2) * (sacle - 1);
const yyy =
((y - mirrorHeight / 2) / nowImgHeight) * nowImgHeight * sacle +
(mirrorHeight / 2) * (sacle - 1);
console.log("xxxx:", xxx, "yyyy:", yyy);
// 大图
maxImg.style.left = "-" + xxx + "px";
maxImg.style.top = "-" + yyy + "px";
}
}
moveBox.onmousemove = function(e) {
var e = e ? e : window.event;
moving(e);
};
moveBox.onmouseout = function(e) {
mirror.style.display = "none";
};
moveBox.onmouseover = function(e) {
mirror.style.display = "block";
};
maxImg.onmousewheel = function(e) {
if (event.deltaY < 0) {
sacle += 0.05;
} else {
sacle -= 0.05;
}
if (sacle < 1) {
sacle = 1;
}
// if (sacle > 2) {
// sacle = 2;
// }
event.preventDefault();
};
};
</script>
</body>
</html>