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

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 >
    <div >
        <img  src="https://www.cnblogs.com//resourcewebsite.singoo.cc/15937570820400231/en/image/5f06c3cc88bd2.jpg_.webp" alt="">
    </div>
</div>

js:

<script src="https://www.cnblogs.com//code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
    $(function(){

        $('.ylZoom').mouseenter(function(){
            let overW = $('<div ></div>'),
                zoomW = $('<div ><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>

標籤：jQuery

上一篇：滑動到當前位置，數字遞增效果

下一篇：ajax獲取上傳進度