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";

 

});