js 简易放大镜
样式如图
html部分
<div class="box">
<div class="pic">
<img src="1.jpeg" alt="">
<div class="cover"></div>
</div>
<div class="detail">
<img src="1.jpeg" alt="">
</div>
</div>
css部分
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 400px;
height: 400px;
margin: 50px 0 0 100px;
}
.pic, .pic img{
width: 100%;
height: 100%;
}
.cover{
display: none;
background-image: url(ge.jpg);
width: 150px;
height: 150px;
position: absolute;
left: 0;
top: 0;
background-size: 3px;
opacity: 0.5;
}
.detail{
position: absolute;
left: 400px;
top: 0;
width: 400px;
height: 400px;
overflow: hidden;
}
.detail img{
/* width: 100%;
height: 100%; */
display: none;
position: absolute;
}
js部分
let pic = document.querySelector(".pic"); //获取左侧盒子
let cover = document.querySelector(".cover"); //获取遮罩层
let detail = document.querySelector(".detail"); //获取右侧盒子
let detailImg = document.querySelector(".detail img"); //获取右侧图片
// 鼠标进入左侧图片时显示遮罩层和右侧图片
pic.addEventListener("mouseenter",function(e){
cover.style.display = "block";
detailImg.style.display = "block";
});
// 鼠标离开左侧图片时遮罩层和右侧图片隐藏
pic.addEventListener("mouseleave",function(e){
cover.style.display = "none";
detailImg.style.display = "none";
});
// 鼠标在图片中移动事件监听
pic.addEventListener("mousemove",function(e){
// 获取鼠标坐标
let x = e.clientX;
let y = e.clientY;
// 左侧图片的坐标
let left = pic.getBoundingClientRect().left;
let top = pic.getBoundingClientRect().top;
// 遮罩层在图片上的偏移量
let cLeft = x - left - cover.offsetWidth/2;
let cTop = y - top - cover.offsetHeight/2;
// 判断临界值
// left 和top的最大值
let leftMax = pic.offsetWidth - cover.offsetWidth;
let topMax = pic.offsetHeight - cover.offsetHeight;
if(cLeft < 0){
cLeft = 0;
}
if(cLeft > leftMax){
cLeft = leftMax;
}
if(cTop < 0){
cTop = 0;
}
if(cTop>topMax){
cTop = topMax;
}
//设置遮罩层的位置
cover.style.left = cLeft + "px";
cover.style.top = cTop + "px";
// 显示放大的图片
// detailImg.left/detailImg.width -detail.width = cover.left/pic.width-cover.width;
let detailImgLeft = (detailImg.offsetWidth - detail.offsetWidth )*cLeft/(pic.offsetWidth-cover.offsetWidth);
let detailImgTop = (detailImg.offsetHeight - detail.offsetHeight )*cTop/(pic.offsetHeight-cover.offsetHeight);
// 设置右侧放大图片的位置
detailImg.style.left = "-" + detailImgLeft + "px";
detailImg.style.top = "-" + detailImgTop + "px";
});