图片局部放大镜
作者：互联网
<!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 {
width: 323px;
position: relative;
margin: 0 auto;
}
#mirror {
position: absolute;
overflow: hidden;
height: 100px;
width: 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">
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 sacle = 1.5
function moving(e) {
var nowImgLeft = nowImg.getBoundingClientRect().left
var nowImgTop = nowImg.getBoundingClientRect().top
// 鼠标距离
var x = e.clientX - nowImgLeft;
var y = e.clientY - nowImgTop;
var nowX = e.target.getBoundingClientRect().left
var nowY = e.target.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;
// 放大图片宽度
maxImg.style.width = nowImg.clientWidth * sacle + "px";
// 边缘限制
if(x - mirrorWidth / 2 < 0) {
mirror.style.left = 0 + "px";
}
// 边缘限制
if(y - mirrorWidth / 2 < 0) {
mirror.style.top = 0 + "px";
}
// 边缘限制
if(x + mirrorWidth / 2 > picWidth) {
mirror.style.left = picWidth - mirrorWidth + "px";
}
// 边缘限制
if(y + mirrorWidth / 2 > picHeight) {
mirror.style.top = picHeight - mirrorWidth + "px";
}
if (
x + mirrorWidth / 2 < picWidth &&
y + mirrorWidth / 2 < picHeight &&
x - mirrorWidth / 2 > 0 &&
y - mirrorWidth / 2 > 0 &&
x <= picWidth &&
y <= picHeight &&
x >= -picWidth &&
y >= -picHeight
) {
// mirror 放大镜
mirror.style.left = x - mirrorWidth / 2 + "px";
mirror.style.top = y - mirrorHeight / 2 + "px";
// 2个放大镜left的距离
var bl = 2 * mirror.offsetLeft;
var bt = 2 * mirror.offsetTop;
console.log('111:',bl, bt)
console.log('222:',bl + mirrorWidth / 2, bt + mirrorHeight / 2)
console.log('sacle:', sacle)
// 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:', x, 'yyyy:', y)
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>
标签：style,sacle,放大镜,局部,mirror,var,mirrorWidth,px,图片 来源： https://www.cnblogs.com/yzyh/p/15239836.html