基于事件的放大镜案例

    <style>
        .magnifier{
            margin: 20px auto;
            width: 500px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .magnifier .abbre{
            position: relative;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
        }
        .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-color: rgba(255, 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;
        }
    </style>

    <section class="magnifier">
        <!-- 缩略图 -->
        <div class="abbre">
            <img src="">
            <!-- MARK遮罩层 -->
            <div class="mark"></div>
        </div>
        <div class="detail">
            <img src="" alt="">
        </div>
    </section>

    <script>
        $(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(),
                detailIMGW=0,
                detailIMGH=0;
                detailIMGH=detailW/(markW/abbreW);
                detailIMGH=detailH/(markH/abbreH);
                $detailIMG.css({
                    width:detailIMGW,
                    height: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
                });
                $detailIMG.css({
                    left:-curL/abbreW*detailIMGW,
                    top:-curT/abbreH*detailIMGH 
                })
            }
            $abbre.mouseenter(function (ev){
                $mark.css('display','block');
                $detail.css('display','block');
                computed(ev);
            }).mousemove(function(ev){
            	computed(ev);
            }).mouseleave(function(ev){
                $mark.css('display','none');
                $detail.css('display','none');
            })
        });
    </script>