Using javascript to complete magnifier
1. Complete the css layout. The layout can be written according to personal preferences

2. Using the object-oriented idea, the first step is to click events for small pictures. You can use event delegation to judge objects, or you can use array to add click events to each small picture

// When you click the small picture, you need to modify the middle picture and the large picture
Enlarge.prototype.click = function(ele){
    // Remove all the red boxes of li and add styles to the currently clicked li
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].style.borderColor = "#0f0"
    }
    ele.style.borderColor = "#f00";
    var smallImg = ele.firstElementChild.firstElementChild;
    // Find the path through the src attribute of this tag
    var smallPath = smallImg.getAttribute("src");
    // The position of the last occurrence of the point, and the number and the extension after it are truncated according to the position of the point
    var lastIndex = smallPath.lastIndexOf(".");
    var suffix = smallPath.slice(lastIndex-1);
    // Splice the path of the medium image and set the src attribute to the img label of the medium image
    var middlePath = "./images/middle" + suffix;
    this.middleImg.setAttribute("src",middlePath);
    // Set the path of the large image and switch between pictures
    var bigPath = "./images/big"+suffix;
    this.big.style.backgroundImage = "url("+bigPath+")"
}

3. Add the move in and move out event to the middle map. When moving in, the mask and large map will be displayed, and the scale between the mask and the middle map will be calculated. Then, the scale will be used for the large box and large map, and the moving distance will be calculated through the scale,
pageX pageY is used to calculate the distance between the mouse and the window. When it is introduced in the future, it will not be caused by content in the upper part, the left part and the mouse distance. You can use the arrow function to get this, or you can define a variable to inherit this. The variable name is that

Enlarge.prototype.out = function(){
    this.shade.style.display = "none"
    this.big.style.display = "none"
}
// Define how to mouse over a medium image
Enlarge.prototype.over = function(){
    this.shade.style.display = "block"
    this.big.style.display = "block"
    var _this = this;
    // Need a mouse move event
    this.middle.onmousemove=function(e){
        // Drag - need to get cursor position
        var e = e || window.event;
        var x = e.pageX;
        var y = e.pageY;
        // console.log(x,y);
        var l = x - _this.box.offsetLeft - this.offsetLeft - _this.shade.offsetWidth/2;
        if(l<=0){
            l=0;
        }
        if(l>=this.clientWidth - _this.shade.offsetWidth){
            l=this.clientWidth - _this.shade.offsetWidth
        }
        _this.shade.style.left = l + "px";
        var t = y - _this.box.offsetTop - this.offsetTop - _this.shade.offsetHeight/2;
        if(t<=0){
            t = 0;
        }
        if(t>=this.clientHeight - _this.shade.offsetHeight){
            t=this.clientHeight - _this.shade.offsetHeight
        }
        _this.shade.style.top = t + "px";
        // The big picture moves with it
        _this.fangda(l,t);
    }
}

4. Pass the distance between the mask and the middle image calculated before, and then pass it into the background image moving method of the big box as a parameter to obtain the proportion, then move the position, and assign the value to the background position attribute of the big image using the template string

Enlarge.prototype.fangda = function(l,t){
	// The ratio is l/w;
    var w = this.middle.clientWidth;
    var percentw = l/w;
    var style = window.getComputedStyle(this.big).backgroundSize;
    // What we get is a string composed of wide px and high px, which needs to be separated by spaces to get the specific width and height
    var bigW = parseInt(style.split(" ")[0]);
    // The left of the big picture is the scale * the width of the big picture
    var bigL = percentw * bigW;
    // height
    var h = this.middle.clientHeight;
    var percenth = t/h;
    var bigH = parseInt(style.split(" ")[1]);
    var bigT = percenth * bigH;
    // Need to set positioning for background
    this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`;
}

5. Encapsulate the variables obtained in the function

function Enlarge(classname){
    // Get all the elements that need to be operated as object attributes
    this.box = document.querySelector("."+classname);
    this.m = this.box.querySelector(".m");
    this.middleImg = this.box.querySelector(".m img");
    this.middle = this.box.querySelector(".middle");
    this.shade = this.box.querySelector(".shade");
    this.ulis = this.box.querySelectorAll("ul li");
    this.big = this.box.querySelector(".big");
    var _this = this;
    // Binding events
    this.middle.onmouseenter = ()=>{
        this.over();
    }
    this.middle.onmouseleave= ()=>{
        // console.log(456);
        this.out();
    }
    // Click the event of the small chart
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].onclick = function(){
            _this.click(this);
        }
    }
}
// Create call object
var enlarge = new Enlarge();