原理就是鼠标在一个大盒子里面移动里面的小盒子跟着动，的基础上加一个区域来放置放大的图片，【计算图片大小，计算移动距离】

• 主要关键步骤就是计算图片移动比例

        遮罩层移动距离         遮罩层
        ------------   =  ---------------
        背景图片移动距离？      放大镜
        
  

• 放大镜图片的大小

        遮罩层              放大镜盒子
   ---------------- =   ----------------
        显示盒子            背景图片 ？
  

css代码

    *{margin: 0;padding: 0;}
.container{
    width: 350px;
    position: relative;
}
.container #p{
    width: 100px;
    height: 100px;
    background: yellow;
    opacity: 0.5;
    position: absolute;
    display: none;
    pointer-events: none;
}
.container .bgimg{
    width: 350px;
    height: 350px;
    /* background-image: url(../imga/show_1.jpg); */
}

.bigbox{
    width: 850px;
    margin: 100px auto;
    display: flex;
}
.bigpic {
    width: 400px;
    height: 400px;
    overflow: hidden;
    margin-left: 40px;
    position: relative;
    display: none;
}
.bigpic img{
    position: absolute;
    top: 0;
    left: 0;
}
.showBox{
    width: 350px;
    height: 350px;
}
.bigbox .fle{
    display: flex;
    justify-content: space-between;
}
.my{
    border: 1px solid red;
}
.bigbox #p1{
    height: 50px;
    width: 50px;
}

html代码

    <div class="bigbox" id="bigBox">
        <div class="container">
            <p id="p"></p>
            <div class="showBox"><img src="imga/show_1.jpg" alt=""></div>
            <div class="fle">
                <span id="p1"><img src="imga/small_1.jpg" alt=""></span>
                <span id="p1"><img src="imga/small_2.jpg" alt=""></span>
                <span id="p1"><img src="imga/small_3.jpg" alt=""></span>
                <span id="p1"><img src="imga/small_4.jpg" alt=""></span>
            </div>
        </div>
        <div class="bigpic"><img src="imga/big_1.jpg" alt="" class="big"></div>
    </div>
    
    
    <script src="js/鼠标移动.js"></script>
    <script>
        let glass = new Glass()
        glass.onMove()
        glass.setScale()
        glass.Tab()
    </script>

js代码

     class Glass {
    constructor(){
        this.bigboxEle = document.querySelector('#bigBox') 
        this.showBoxEle = this.bigboxEle.querySelector('.showBox') //显示中等图片的盒子
        this.pEle = this.bigboxEle.querySelector('#p') //遮罩
        this.bigpicEle = this.bigboxEle.querySelector('.bigpic')//放大镜盒子
        this.glassImg = this.bigboxEle.querySelector('.bigpic>img')//放大镜图片  
        this.showImg = this.bigboxEle.querySelector('.showBox>img')
        this.spanEles = this.bigboxEle.querySelectorAll('#p1')//所有的点击图片
    }
    onMove(){
        let _this = this
        this.showBoxEle.addEventListener('mousemove',function(e){
            e = e || window.event
            let x = e.offsetX - _this.pEle.offsetWidth / 2
            let y = e.offsetY - _this.pEle.offsetHeight / 2

            if(x < 0){
                x = 0
            }
            if(y < 0){
                y = 0
            }
            if(x > _this.showBoxEle.offsetWidth - _this.pEle.offsetWidth){
                x = _this.showBoxEle.offsetWidth - _this.pEle.offsetWidth
            }
            if(y > _this.showBoxEle.offsetHeight - _this.pEle.offsetHeight){
                y = _this.showBoxEle.offsetHeight - _this.pEle.offsetHeight
            }
            _this.pEle.style.top = y + 'px'
            _this.pEle.style.left = x + 'px'
            _this.pEle.style.display = 'block'
            _this.bigpicEle.style.display = 'block'


           /*  遮罩层移动距离         遮罩层
            ------------   =  ----------------
            背景图片移动距离？      放大镜 */
            // 获取遮罩的还有放大镜宽高
            let pEleWith = parseInt(window.getComputedStyle(_this.pEle).width)
            let pEleHeight = parseInt(window.getComputedStyle(_this.pEle).height)
          
            let glassWith = parseInt(window.getComputedStyle(_this.bigpicEle).height)
            let glassHeight = parseInt(window.getComputedStyle(_this.bigpicEle).height)
           
            let moveX = x * glassWith / pEleWith
            let moveY = y * glassHeight / pEleHeight
            _this.glassImg.style.top = -moveY + 'px'
            _this.glassImg.style.left = -moveX + 'px'
        })
        //鼠标移出遮罩消失
        this.showBoxEle.addEventListener('mouseout',function(){
            _this.pEle.style.display = 'none'
            _this.bigpicEle.style.display = 'none'

        })
    }

    setScale(){
        /*      遮罩层          放大镜盒子
        *      --------     =   -------
        *       显示盒子         背景图片 ？ */
        let pEleWith = parseInt(window.getComputedStyle(this.pEle).width)//遮罩
        let pEleHeight = parseInt(window.getComputedStyle(this.pEle).height)

        let showWith = parseInt(window.getComputedStyle(this.showBoxEle).width)//显示盒子
        let showHeight = parseInt(window.getComputedStyle(this.showBoxEle).height)

        let glassWith = parseInt(window.getComputedStyle(this.bigpicEle).width)//放大镜
        let glassHeight = parseInt(window.getComputedStyle(this.bigpicEle).height)

        let picX = showWith * glassWith / pEleWith
        let picY = showHeight * glassHeight / pEleHeight

        this.glassImg.style.width = picX +'px'
        this.glassImg.style.height = picY +'px'
    }

    // 点击方法
    Tab(){
        let _this = this
        for(let i = 0 ; i < this.spanEles.length;i++){
            _this.spanEles[i].addEventListener('mouseover',function(){
                _this.clearStyle()
                _this.spanEles[i].classList.add('my')
                _this.showImg.setAttribute('src',`imga/show_${i+1}.jpg`)
                _this.glassImg.setAttribute('src',`imga/big_${i+1}.jpg`)
                
            })
        }
       
    }
    clearStyle(){
        let _this = this
        for(let i = 0 ; i < this.spanEles.length;i++){
            _this.spanEles[i].classList.remove('my')
        }
    }
 }