話不多說，直接先上效果圖
效果圖
放大鏡 (2).gif
文件結(jié)構(gòu)圖：
1569806498039.png
上代碼：
CSS
*{
margin: 0;
padding: 0;
}
.container{
margin: 20px auto;
width: 650px;
/*height: 300px;*/
}
.container .smallBox{
position: relative;
float: left;
width: 300px;
height: 300px;
overflow: hidden;
}
.container .smallBox img{
display: block;
width: 100%;
height: 100%;
}
.mark{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: rgba(220, 20, 164,0.3);
cursor: move;
}
.bigBox{
position: relative;
float: left;
width: 350px;
height: 350px;
overflow: hidden;
}
.bigBox img{
position: absolute;
top: 0;
left: 0;
/*mark:small-box===big-box:大img*/
width: 1050px;
height: 1050px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="magnifier.css">
<body>
<!--section.magnifierBox>(div.smallBox>img[src='img/縮小.jpg']+div.mark)+(div.bigBox>img[src='img/放大.jpg'])-->
<section class="container clearfix">
<div class="smallBox">
<img src="img/小.jpg" alt="">
<!--<div class="mark"></div>-->
</div>
<div class="bigBox"><img src="img/小.jpg" alt=""></div>
</section>
<script src="magnifier.js"></script>
</body>
JS
let smallBox=document.querySelector('.smallBox'),
mark=null;
let bigBox=document.querySelector('.bigBox'),
bigImg=bigBox.querySelector('img');
//=>鼠標(biāo)滑過:創(chuàng)建mark
smallBox.onmouseenter=function(){
if(!mark){
mark=document.createElement('div');
mark.className='mark';
this.appendChild(mark);
bigBox.style.display='block';
}
};
//=>鼠標(biāo)移動(dòng)實(shí)現(xiàn)mark跟隨鼠標(biāo)移動(dòng)
smallBox.onmousemove=function(ev){
if(!mark) return;
//計(jì)算鼠標(biāo)在盒子中間的left和top
let curL=ev.pageX-smallBox.offsetLeft-mark.offsetWidth/2,
curT=ev.pageY-smallBox.offsetTop-mark.offsetHeight/2;
//計(jì)算的值不能超過邊界
let minL=0,minT=0,
maxL=smallBox.offsetWidth-mark.offsetWidth,
maxT=smallBox.offsetHeight-mark.offsetHeight;
curL=curL<minL?minL:(curL>maxL?maxL:curL);
curT=curT<minT?minT:(curT>maxL?maxT:curT);
//給markz賦值樣式，讓其移動(dòng)到指定位置
mark.style.left=curL+'px';
mark.style.top=curT+'px';
bigImg.style.left=-curL*3.5+'px';
bigImg.style.top=-curT*3.5+'px';
}
//=>鼠標(biāo)離開,移除mark
smallBox.onmouseleave=function(){
if(mark){
this.removeChild(mark);//從頁面中移除mark,但是此時(shí)mark變量依然存儲(chǔ)著之前的值（頁面移除是DOM操作，但是mark是js變量沒啥關(guān)系）
mark=null;//=>手動(dòng)賦值為null,代表mark已經(jīng)不存在了
bigBox.style.display='none';
}
};
