js实现简单放大镜特效

.box {
 width: 450px;
 height: 450px;
 margin: 100px 0 0 100px;
 border: 1px solid red;
 position: relative;
 }

 / 右边大盒子 /
 .bigBox{
 width: 540px;
 height: 540px;
 position: absolute;
 : 100px;
 left: 560px;
 border: 1px solid #c;
 overflow: hidden;
 display: none;
 }
 .bigBox img {
 position: absolute;
 left: 0;
 : 0;
 }


 / 覆盖物 /
 .box .mask{
 width: 260px;
 height: 260px;
 background-color: yellow;
 /调整透明度 /
 opacity: .4;
 position: absolute;
 left: 0;
 : 0;
 / 默认消失 /
 display: none;
 }

<script>
 
 window.onload = function (){
 var box = document.querySelector(".box");
 var mask = document.querySelector(".mask");
 var bigBox = document.querySelector(".bigBox");
 var bigImg = document.querySelector(".bigBox > img");
 console.log(bigImg);
 
 // 鼠标移入
 box.onmouseover = function (){
 document.querySelector(".mask").style.display = "block";
 document.querySelector(".bigBox").style.display = "block";
 }
 // 移出
 box.onmouseout = function (){
 document.querySelector(".mask").style.display = "none";
 document.querySelector(".bigBox").style.display = "none";
 }

 // 让覆盖物跟随鼠标移动
 box.onmousemove = function (){
 // 因为box有100像素的外边距，我们需要减掉，否则会错位
 var left = event.pageX - 100 - 130;
 var  = event.pageY - 100 - 130;
 // 覆盖物不能超出box范围，就需要判坐标的取值范围了
 // 得到覆盖物在box中可移动的最大距离
 var maskMax = this.offsetWidth - mask.offsetWidth;
 // 判断left
 if(left <= 0){
 left = 0;
 }else if(left >= maskMax){
 left = maskMax;
 }

 // 
 if( <= 0){
  = 0;
 }else if( >= maskMax){
  = maskMax;
 }

 // 将设置好的left，值设置给样式
 mask.style.left = left + "px";
 mask.style. =  + "px";
 mask.style.cursor = "move";

// 大图在大盒子中的最大位移距离
var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// 大图片的left值
var bigImgX = mask.offsetLeft  bigImgMax / maskMax;
// 大图的值
 
var bigImgY = mask.offsetTop  bigImgMax / maskMax;
 // 覆盖物与大图片的移动方向是反的，所以这里要给负值
 bigImg.style.left = -bigImgX + "px";
 bigImg.style. = -bigImgY + "px";

 }
 }

<div class="box">
 <img src="../img/small.jpg" alt="">
<div class="mask">
</div>
<div class="bigBox">
 <img src="../img/big.jpg" alt="">
</div>