HTML

<section class="magnifier">
    <div class="abbre">
        <img src="1.jpg" alt="">
        <div class="mark">

        </div>
    </div>
    <div class="detail">
        <img src="2.jpg" alt="">
    </div>
</section>

CSS

*{
    margin:0px;
    padding:0px; 
}
html{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    
}
.magnifier{
    margin:20px auto;
    width: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.magnifier .abbre{
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    position: relative; 

}
.magnifier .abbre img{
     width: 100%;
     height: 100%;
}
.magnifier .abbre .mark{
    display: none;
    position: absolute;
    top:0;
    left: 0;
    z-index:10;
    width: 80px;
    height: 80px;
    background: rgba(255,0,0,0.4);
    cursor: move;
}
.magnifier .detail{
    display: none;
    position: relative;
    box-sizing: border-box;
    width: 300px;
    height: 300px;
    overflow: hidden; 
}
.magnifier .detail img{
    position: absolute;
    top:0;
    left: 0;
    z-index:10;
} 

JS

//用jQuery实现,以下是实现的代码
$(function(){
    let $magnifier = $('.magnifier'),
        $abbre =$magnifier.find('.abbre'),
        $mark = $abbre.find('.mark'),
        $detail = $magnifier.find('.detail'),
        $detailIMG = $detail.find('img')
    // 动态计算大图的大小
    let abbreW = $abbre.width(),
        abbreH = $abbre.height(),
        abbreOffset = $abbre.offset(),
        markW = $mark.width(),
        markH = $mark.height(),
        detailW =$detail.width(),
        detailH = $detail.height(),
        detailImgH = 0,
        detailImgW = 0;
    
    detailImgW=detailW*abbreW/markW
    detailImgH=detailH*abbreH/markH
    $detailIMG.css({
        width:detailImgW,
        height:detailImgH
    })
    console.log(detailImgW,detailImgH)
    
    // 计算 mark/大图 移动的位置
    const computed = function computed(ev) {
        let curL = ev.pageX-abbreOffset.left-markW/2,
            curT = ev.pageY-abbreOffset.top-markH/2
        
        // 边界处理
        let minL = 0,
            minT = 0,
            maxL = abbreW-markW,
            maxT = abbreH - markH
        
        curL = curL<minL?minL:(curL>maxL?maxL:curL)
        curT = curT<minT?minT:(curT>maxT?maxT:curT)

        $mark.css({
            left:curL,
            top:curT
        })

        // 大图移动的方向和mark 相反， 移动成比例
        $detailIMG.css({
            left:-curL/abbreW*detailImgW,
            top:-curT/abbreH*detailImgH
        }) 
    } 
    $abbre.on('mouseenter',function(ev){
        $mark.css('display','block')
        $detail.css('display','block')
        computed(ev)
    }).on('mousemove',function(ev){
        computed(ev)
    }).on('mouseleave',function(ev){
        $mark.css('display','none')
        $detail.css('display','none')
    }) 
})