Using JS to realize magnifying glass effect

Let's take a picture first:

 

This special effect is learned from the video on the MOOC online, the video link is as follows: https://www.imooc.com/learn/32

The source code and technical points have been uploaded to the attachment, you can view and download if necessary.

The code is directly below (PS: The comments in the code are added based on personal understanding, not the teacher's original comments):

Page structure :

<div id="demo">
	<!--Small picture area on the left-->
    <div id="small-box">		
        <div id="mark"></div><!--A clickable area on the left, similar to a mask layer, keeps the mouse moving on this area. -->
        <div id="float-box"></div><!--left magnifying glass area-->
        <img src="macbook-small.jpg"/>
    </div>
	<!--Large image area on the right-->
    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>

CSS style :

<style>
	* {
		margin: 0;
		padding: 0
	}

	#demo {
		display: block;
		width: 400px;
		height: 255px;
		margin: 50px;
		position: relative;
		border: 1px solid #ccc;
	}

	#small-box {
		position: relative;
		z-index: 1;
	}

	#float-box {
		display: none;
		width: 160px;
		height: 120px;
		position: absolute;
		background: #ffffcc;
		border: 1px solid #ccc;
		filter: alpha(opacity=50);
		opacity: 0.5;
	}

	#mark {
		position: absolute;
		display: block;
		width: 400px;
		height: 255px;
		background-color: #fff;
		filter: alpha(opacity=0);
		opacity: 0;
		z-index: 10;
		cursor:move;
	}

	#big-box {
		display: none;
		position: absolute;
		top: 0;
		left: 460px;
		width: 400px;
		height: 300px;
		overflow: hidden;
		border: 1px solid #ccc;
		z-index: 1;;
	}

	#big-box img {
		position: absolute;
		z-index: 5
	}
</style>

JS code :

window.onload=function(){
	var demoObj = document.getElementById("demo");//The object where the entire div is located

	var smallBoxObj = document.getElementById("small-box");//Small picture area on the left
	var markObj = document.getElementById("mark");//The area on the left can be clicked
	var floatBoxObj = document.getElementById("float-box");//The magnifying glass area on the left
	var bigBoxObj = document.getElementById("big-box");//The big picture area on the right
	var bigBoxImageObj = bigBoxObj.getElementsByTagName("img")[0];
	//When the mouse enters the mark area, the magnifying glass is displayed, and the large picture area is displayed
	markObj.onmouseover = function () {
		floatBoxObj.style.display="block";
		bigBoxObj.style.display="block";
	};

	//When the mouse leaves the mark area, the magnifying glass is hidden, and the large picture area is also hidden
	markObj.onmouseout = function () {
		floatBoxObj.style.display="none";
		//bigBoxObj.style.display="none";
	};

	//When the mouse moves in the mark area, the magnifying glass and the large picture area move according to the movement of the mouse
	markObj.onmousemove = function (ev) {
		//1, first calculate the movement of the magnifying glass
		var _event = ev || window.event;
		/*Using this way of writing, the mouse icon is always in the upper left corner of the magnifying glass area, which is not very beautiful, so it is changed to be displayed in the middle of the magnifying glass area, which is half of offsetWidth and offsetHeight
		var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft;				
		var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop;
		*/

		var left = _event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft - floatBoxObj.offsetWidth/2;			
		var top = _event.clientY - demoObj.offsetTop - smallBoxObj.offsetTop - floatBoxObj.offsetHeight/2;
		
		//1.1 Solve the problem of magnifying glass out of bounds: leave the area where the smallBox is located
		//Left out of bounds: the offsetLeft on the left border (_event.clientX - demoObj.offsetLeft - smallBoxObj.offsetLeft) is smaller than the offsetWidth/2 of the magnifying glass. In order to satisfy "the mouse is always displayed in the middle", the magnifying glass will be displayed beyond the bounds. , at this time let its left be 0, which coincides with the left border

		//Right out of bounds: floatBoxObj must be displayed in the area where markObj is located. When the right side of floatBoxObj is not in the markObj area, the right side will be out of bounds, then left should be the difference between the width of markObj and the width of floatBoxObj (in the area of ​​markObj or smallBoxObj It can be within the range, as long as it does not exceed the boundary of this area, because the left side moves on the markObj, so markObj is used here)				
		if(left<0){	
			left=0;
		}else if(left>(markObj.offsetWidth-floatBoxObj.offsetWidth)){
			//console.log("333333333333");
			left = markObj.offsetWidth-floatBoxObj.offsetWidth;
		}
		//Similarly solve the problem of height out of bounds
		if(top<0){top=0;}
		else if(top>(markObj.offsetHeight-floatBoxObj.offsetHeight)){
			top = markObj.offsetHeight-floatBoxObj.offsetHeight;
		}	

		//console.log("left="+left+"\ttop="+top);
		//The location of the magnifying glass area
		floatBoxObj.style.left = left+"px";
		floatBoxObj.style.top = top+"px";

		//2. Display the picture in the large picture area
		//(???? I don't understand the calculation method very well)
		var percentX = left / (markObj.offsetWidth - floatBoxObj.offsetWidth);
		var percentY = top / (markObj.offsetHeight - floatBoxObj.offsetHeight);

		bigBoxImageObj.style.left = -percentX * (bigBoxImageObj.offsetWidth - bigBoxObj.offsetWidth) + "px";
		bigBoxImageObj.style.top = -percentY * (bigBoxImageObj.offsetHeight - bigBoxObj.offsetHeight) + "px";
	};
};

The big picture shows that I don't understand much, and I don't understand what is said in the learning video. If you understand, please let me know, thank you!