原生js实现放大镜
效果图
建一个html网页即可,无需引入任何文件
<!DOCTYPE html>
<html lang="en">
<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>放大镜</title>
<style>
#box {
margin: 100px;
position: relative;
}
.small {
position: relative;
width: 200px;
height: 267px;
cursor: move;
}
.mask {
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
display: none;
}
.big {
width: 200px;
height: 267px;
overflow: hidden;
position: absolute;
top: 0;
left: 200px;
display: none;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!-- 当前模块 -->
<div id="box">
<div class="small">
<!-- 小图 -->
<img src="./small.png" width="200px" alt="">
<!-- 遮罩 -->
<div class="mask"></div>
</div>
<div class="big">
<!-- 大图 -->
<img src="./big.jpg" alt="">
</div>
</div>
<script>
// 1.当鼠标滑动到当前模块,显示遮罩层和大图
// 1.1获取所有标签
var box = document.getElementById('box');
var small = document.querySelector('.small');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var bigImag = big.children[0];
// 通过改变mask 、big 元素的display属性,控制显隐藏
box.onmouseover = function () {
// 鼠标划入上去时显示
mask.style.display = 'block';
big.style.display = 'block';
}
box.onmouseout = function () {
// 鼠标移出隐藏
mask.style.display = 'none';
big.style.display = 'none';
}
// 2.遮罩层跟随鼠标
// 鼠标移动事件
small.onmousemove = function (e) {
// 动态获取鼠标的xy距离 外框有100的margin值
var x = e.clientX - 100;
var y = e.clientY - 100;
// 动态获取mask元素的宽度
x = x - mask.offsetWidth / 2;
y = y - mask.offsetHeight / 2;
// 2.02遮罩层移动的区域有限制
// 1).不超过上
if (y < 0) { y = 0 }
// 2).不超过左
if (x < 0) { x = 0 }
// 3).不超过右
// samll.offsetWidth-mask.offsetWidth X值的最大限度
if (x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth };
// 4).不超过下
if (y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight }
// 动态控制mask元素的left 、top
mask.style.top = y + 'px';
mask.style.left = x + 'px';
// 遮罩层移动距离/遮罩层移动最大距离 =
// 大图移动的距离/大图最大移动距离
// 求:大图移动的距离
//大图移动的距离 = 遮罩层移动距离/遮罩层移动最大距离*大图最大移动距离
var bigX;
var bigY;
console.log(x);
bigX = x / (small.offsetWidth - mask.offsetWidth) * (bigImag.offsetWidth - big.offsetWidth)
bigY = y / (small.offsetHeight - mask.offsetHeight) * (bigImag.offsetHeight - big.offsetHeight)
// 3.大图展示的区域
bigImag.style.top = - bigY + 'px';
bigImag.style.left = - bigX + 'px'
}
</script>
</body>
</html>