用原生JS实现一个简易的放大镜功能
附带放大镜相关公式 以及 offsetX,offsetY抖动解决办法
效果如图:
先完成HTML结构:
<div class="zoom">
<!-- 小图 -->
<div class="smallImg">
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
<!-- 放置大图的div -->
<div class="big">
<!-- 大图 -->
<img class="bigImg" src="./image.jpg" alt="">
</div>
</div>
CSS样式:
* {
margin: 0;
padding: 0;
}
.smallImg {
position: absolute;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #ccc;
background-image: url('./image.jpg');
background-size: cover;
}
.mask {
display: none;
position: absolute;
width: 50px;
height: 50px;
background-color: red;
opacity: .3;
}
.big {
/* 大图默认隐藏 */
display: none;
position: absolute;
top: 100px;
left: 502px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
/* 让大图溢出部分隐藏 */
overflow: hidden;
}
.bigImg {
position