放大镜

js

$(document).ready(function () {
            //1.获取可视区域的高度 宽度
            let vh = $(window).height();
            let vw = $(window).width();

            //2.获取图片的高度 和宽度
            let imgh = $(".wrap img").height()
            let imgw = $(".wrap img").width()

            //3.放大两倍  可视除以10    图片区域
            let beginX = (vw - imgw) / 2;
            let endX = beginX + imgw;

            //4.图片距离顶部的距离
            let beginY = (vh - imgh) / 2;
            let endY = beginY + imgh;
            $(".wrap").css("margin-top", beginY + "px")

            //5.鼠标经过
            document.addEventListener("mousemove", loupe, false);


            //6.触屏模式触发
            document.addEventListener("touchmove", loupe, false);
            document.addEventListener("touchstart", loupe, false);
            document.addEventListener("touchend", function (e) {
                $(".loupe").css("visibility", "hidden");
            }, false);

            //7.执行函数
            function loupe(e) {
                let x, y
                if (e.type != "mousemove") {
                    //手指横坐标纵坐标
                    x = e.touches[0].pageX
                    y = e.touches[0].pageY
                }
                //如果支持触摸事件，则屏蔽鼠标经过事件，避免影响touchstart的效果
                else if ("ontouchend" in document) {
                    return false;
                }
                //如果不支持触摸事件，则让鼠标经过事件正常触发
                else {
                    x = e.clientX
                    y = e.clientY
                }
                console.log(x, y)
                //判断鼠标或触摸点在图片区域，是则显示放大镜div层
                if (x > beginX && x < endX && y > beginY && y < endY) {
                    let mx = 100 - (x - beginX) / imgw * 1920 //1920为原图片宽度
                    let my = 100 - (y - beginY) / imgh * 1200 //1200为原图片高度
                    let bg = "url() " + mx + "px " + my +
                        "px no-repeat #fff"
                    $(".loupe").css("left", x - 103 + "px").css("top", y - 103 + "px").css('background', bg)
                    $(".loupe").css("visibility", "visible")
                } else {
                    $(".loupe").css("visibility", "hidden")
                }
            }
        });

css

* {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wrap {
            text-align: center;
        }

        .wrap img {
            width: 60%;
            cursor: crosshair;
        }

        .loupe {
            position: absolute;
            pointer-events: none;
            visibility: hidden;
            z-index: 999;
            width: 200px;
            height: 200px;
            border: 3px solid #636363;
            border-radius: 50%;
        }

html

<div class="loupe"></div>
    <div class="wrap">
        <img src=""> 
    </div>