Ideas and codes for realizing magnifying glass effect in js

<div id="box">
        <!-- toBig is a magnifying glass element -->
     <div id="toBig"></div>
        <!-- Small Image -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- Large image, ratio is 1.5 times -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

 *{
          margin: 0px;
          padding: 0px;
            }    
            #box{
             position: relative;
             float: left;
            }
   #toBig{
    width: 80px;
    height: 80px;
    border: 1px solid gray;
    background-color: transparent;
    position: absolute;
   }
   #beBig{
    float: left;
    overflow: hidden;
    border: 1px solid gray;
    position: relative;
    left: 40px;
    top:325px ;
   }
   #bigImg{
    position: absolute;
   }

<script type="text/javascript">
            //Get the small image, large image, magnifying glass element, and parent element of the large image var smallImg = document.querySelector ("#smallImg");
   var bigImg = document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*Calculate the ratio of small pictures to large pictures when the page is loaded*/
            var q=0;
   window.onload = function(){
    q=bigImg.offsetWidth/smallImg.offsetWidth;
                //Calculate the size of the magnified content to be displayed based on the width, height and ratio of the magnifying glass beBig.style.width = toBig.clientWidth * q + "px";
    beBig.style.height = toBig.clientHeight * q + "px";
   }
            //Get the center of the magnifying glass element and ensure that the mouse is in the center of the magnifying glass var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            //flag is a sign, when the mouse is pressed it is true, you can move flag=false;
   toBig.onmousedown = function(){
    flag=true;
   }
   toBig.onmouseup = function(){
    flag=false;
   }
   
   window.onmousemove=function(ev){
    var ev = ev || window.event;
                //When flag is true, the magnifying glass element is pressed and can be dragged if (flag) {
                    //Get the current position of the mouse and calculate the position to move in addition to the element itself var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX=mouseX-xCenter;
 
                    //Judge whether the magnifying glass element exceeds the small image range if (trueX < smallImg.offsetLeft) {
      trueX = smallImg.offsetLeft;
     }
     if(trueX > smallImg.clientWidth - toBig.offsetWidth){
      trueX = smallImg.clientWidth - toBig.offsetWidth;
     }
     var trueY=mouseY - yCenter;
     if(trueY <= smallImg.offsetTop){
      trueY = smallImg.offsetTop;
     }
     if (trueY > smallImg.clientHeight - toBig.offsetHeight) {
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    //Small picture moves toBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     console.log(trueX,trueY);
     
     // The position where the big picture is to be moved bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top = -(trueY * q) + "px";
    }
   }
   
</script>