js to achieve simple magnifying glass effects

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

 /* Big box on the right */
 .bigBox{
 width: 540px;
 height: 540px;
 position: absolute;
 top: 100px;
 left: 560px;
 border: 1px solid #ccc;
 overflow: hidden;
 display: none;
 }
 .bigBox img {
 position: absolute;
 left: 0;
 top: 0;
 }


 /* Overlay */
 .box .mask{
 width: 260px;
 height: 260px;
 background-color: yellow;
 /*Adjust transparency*/
 opacity: .4;
 position: absolute;
 left: 0;
 top: 0;
 /*Disappear by default*/
 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);
 
 //Mouse moves into box.onmouseover = function (){
 document.querySelector(".mask").style.display = "block";
 document.querySelector(".bigBox").style.display = "block";
 }
 // Move out of box.onmouseout = function (){
 document.querySelector(".mask").style.display = "none";
 document.querySelector(".bigBox").style.display = "none";
 }

 // Let the overlay follow the mouse movement box.onmousemove = function (){
 // Because the box has a 100-pixel margin, we need to subtract it, otherwise it will be misaligned var left = event.pageX - 100 - 130;
 var top = event.pageY - 100 - 130;
 // The covering object cannot exceed the range of the box, so it is necessary to determine the range of coordinate values. // Get the maximum distance that the covering object can move in the box var maskMax = this.offsetWidth - mask.offsetWidth;
 //Judge left
 if(left <= 0){
 left = 0;
 }else if(left >= maskMax){
 left = maskMax;
 }

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

 // Set the set left and top values ​​to the style mask.style.left = left + "px";
 mask.style.top = top + "px";
 mask.style.cursor = "move";

// Maximum displacement distance of the big image in the big box var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// Left value of the big picture var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
// Top value of the big image var bigImgY = mask.offsetTop * bigImgMax / maskMax;
 // The moving direction of the overlay is opposite to that of the large image, so a negative value should be given here bigImg.style.left = -bigImgX + "px";
 bigImg.style.top = -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>