無聊試着寫個商品放大鏡功能

css：
<style>
    .ylImg { width: 100%; max-width: 500px; margin: 50px auto 0; position: relative; }

    .ylZoom { position: relative; }

    .ylZoom .zoomImg{width:100%;}

    .ylZoom .zoomW { position: absolute; top: 0; left: 100%; width: 100%; max-width: 400px; overflow: hidden; margin-left: 10px; border: 1px solid #dfe2ed; }

    .ylZoom .zoomW img { max-width: none; position: absolute; transition: 0s all; -moz-transition: 0s all; -webkit-transition: 0s all; -o-transition: 0s all; -ms-transition: 0s all; }

    .ylZoom { position: relative; }

    .ylZoom .overW { position: absolute; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border: 1px solid #dfe2ed; top: 0; left: 0; cursor: move; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

    @media screen and (max-width: 600px) { .ylZoom .overW { width: 50px; height: 50px; }
        .ylZoom .zoomW { left: 0; top: 100%; margin-left: 0; margin-top: 10px; } }
</style>

html:

<div class="ylImg">
    <div class="ylZoom">
        <img class="zoomImg" src="//resourcewebsite.singoo.cc/15937570820400231/en/image/5f06c3cc88bd2.jpg_.webp" alt="">
    </div>
</div>

js:

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<script>    $(function(){        $('.ylZoom').mouseenter(function(){            let overW = $('<div class="overW"></div>'),                zoomW = $('<div class="zoomW"><img src=""></div>');            $(this).append(overW).append(zoomW);            $(this).find('.zoomW').find('img').attr('src',$(this).find('.zoomImg').attr('src'));            $(this).find('.zoomW').height($(this).find('.zoomW').innerWidth());        });        $('.ylZoom').mouseleave(function(){            $(this).find('.overW').remove();            $(this).find('.zoomW').remove();        });        $('.ylZoom').mousemove(function(event){            let x = event.pageX,/*光標X座標*/                y = event.pageY,/*光標Y座標*/                left = 0,/*拖拽元素左邊距到父元素的距離*/                top = 0,/*拖拽元素上邊距到父元素的距離*/                width = $(this).find('.overW').innerWidth(),/*拖拽元素寬度*/                height = $(this).find('.overW').innerHeight(),/*拖拽元素高度*/                offsetX = $(this).offset().left,/*父元素左邊距到body的距離*/                offsetY = $(this).offset().top,/*父元素上邊距到body的距離*/                percentage = 0,/*拖拽元素寬度相對父元素寬度的百分比*/                zoomW = 0,                zoomH = 0;            /*拖拽元素貼近父容器時*/            if(x-offsetX<=width/2&&x-offsetX>=0){                left = 0;            }else if(x-offsetX<=$(this).innerWidth()&&(x-offsetX>=$(this).innerWidth()-width/2)){                left = $(this).innerWidth()-width;            }else{                left = x-offsetX- width/2;            }            if(y-offsetY<=height/2&&y-offsetY>=0){                top = 0;            }else if(y-offsetY<=$(this).innerHeight()&&(y-offsetY>=$(this).innerHeight()-height/2)){                top = $(this).innerHeight()-height;            }else{                top = y-offsetY- height/2;            }            $(this).find('.overW').css({                left:left+'px',                top:top+'px'            });            if(x<=offsetX || x>=offsetX+$(this).innerWidth() || y<=offsetY || y>=offsetY+$(this).innerHeight()){                console.log(x,offsetX);                $(this).find('.overW').remove();                $(this).find('.zoomW').remove();            }            percentage = -$(this).find('.zoomW img').innerWidth()/$(this).innerWidth();            zoomH = top*percentage;            if($(this).find('.zoomW img').innerWidth() + left*percentage < $('.zoomW').innerWidth()){                zoomW = -($(this).find('.zoomW img').innerWidth() - $(this).find('.zoomW').innerWidth());            }else{                zoomW = left*percentage;            }            if($(this).find('.zoomW img').innerHeight() + top*percentage < $('.zoomW').innerHeight()){                zoomH = -($(this).find('.zoomW img').innerHeight() - $(this).find('.zoomW').innerHeight());            }else{                zoomH = top*percentage;            }            $(this).find('.zoomW img').css({                left:zoomW +'px',                top:zoomH +'px'            });        });    });</script>