SOURCE

// 图片放大镜
// @params Class 目标class string
// @params Scale 放大倍数 number
function ScaleImg(Class,Class2, Scale){
        this.Box = document.querySelector(Class);
        this.NewBox = document.querySelector(Class2);
     
        // this.Img = this.Box.querySelector('img')
        this.Img = this.NewBox.querySelector('img');
         
        this.scale = Scale || 3 ;

     
        // 盒子中心点
        this.BoxX = this.Box.offsetWidth / 2; 
        this.BoxY = this.Box.offsetHeight / 2; 
     
        // 获取盒子初始定位
        this.Left = parseFloat( this.Box.offsetLeft ); 
        this.Top = parseFloat(this.Box.offsetTop ); 
     
        this.Init();
     
    }
     
    ScaleImg.prototype = {
     
        // 鼠标移入
        Mouseover: function(e){
         
            var e = e || window.event;
             //设置图片的display为block
            this.Img.style.display="block";

            // 放大图片
            this.Img.style.width = this.Img.offsetWidth * this.scale + "px"; 
            this.Img.style.height = this.Img.offsetHeight * this.scale + "px";
     
            // 设置放大后的图片定位
            this.Img.style.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2 + "px"; 


            
            this.Img.style.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2 + "px"; 
             
            // 获取图片放大后定位值
            this.ImgLeft = parseFloat(this.Img.style.left); 
            this.ImgTop = parseFloat(this.Img.style.top); 
     
            this.Box.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2;
            this.Box.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2;
             
            // 阻止默认事件
            return ;
     
        },
     
        // 鼠标移除
        Mouseout: function(e){
     
            var e = e || window.event;
           
            // 重置css
            this.Img.style.width = this.Img.offsetWidth / this.scale + "px"; 
            this.Img.style.height =this.Img.offsetHeight / this.scale + "px"; 
     
            this.Img.style.left = Math.floor((this.Box.offsetWidth - this.Img.offsetWidth) / 2) + "px"; 
            this.Img.style.top = Math.floor((this.Box.offsetHeight - this.Img.offsetHeight) / 2) + "px";
           
           //隐藏盒子           
           this.Img.style.display="none";
            return  ;
        },
     
        // 鼠标移动
        Mousemove: function(e){
     
            var e = e || window.event;
     
            // 图片鼠标位置
            var ImgXY = {"x": this.Left + this.BoxX, "y": this.Top + this.BoxY};
     
            // 获取偏移量 
            var left = (ImgXY.x - e.clientX ) / this.BoxX * this.ImgLeft ,
                top = (ImgXY.y - e.clientY) / this.BoxY * this.ImgTop ;
             
            this.Img.style.left = Math.floor(this.Box.left - left) + "px";
            this.Img.style.top = Math.floor(this.Box.top - top) + "px";

            return ;
        },
     
        // 初始化
        Init: function(e){
     
            var that = this;
     
            this.Box.onmouseover = function(e){
                that.Mouseover(e);
            }
            this.Box.onmouseout = function(e){
                that.Mouseout(e);
            }
            this.Box.onmousemove = function(e){
                that.Mousemove(e);
            }
     
        }
    }
     
    // 实例一个对象
    new ScaleImg('.Box','.newBox');    

<div style="display:flex">
<div class="Box" 
style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidden;">
        <Img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671848687&t=fcfbb2751034b71cc6ed804a1052afa4" alt="" style="width:200px;height:200px;position:absolute;left:0;top:0;">
</div>

<div class="newBox" style="width:200px;height:200px;position: relative;top:0;left:0;overflow: hidden;">
    <Img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671848687&t=fcfbb2751034b71cc6ed804a1052afa4"  style="display:none;width:200px;height:200px;position:absolute;left:0;top:0;" />
</div>
</div>

/* .newBox{
    display:none;
} */