该功能为三部分

  • 1.小图部分
    小图宽高为400px
  • 2.放大镜
    放大镜宽高为200px
  • 3.大图部分
    大图宽高为800px

大图小图都是同一张图片，通过css来设置宽高，通过鼠标在小图中的位置来控制大图的横向和纵向滚动条的位置来实现该功能

效果图：

html代码
左边为小图部分，右边为大图部分

<div id="smallBox">
	<img src="/img/1.png" alt="">
	<div id="zoom"></div>
</div>
	<div id="bigBox">
	<img src="/img/1.png" alt="">
</div>

css代码：

        #smallBox {
   
            width: 400px;
            height: 400px;
            position: relative;
        }

        #smallBox img {
   
            width: 400px;
            height: 400px;
        }

        #bigBox {
   
            width: 400px;
            height: 400px;
            position: absolute;
            overflow: hidden;
            display: none;
        }

        #bigBox img {
   
            width: 800px;
            height: 800px;
        }
        #zoom {
   
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: .2;
            cursor: move;
        }

jQuery代码：

        $(document).ready(function () {
   
            //鼠标悬停
            $("#smallBox").mouseenter(function (e) {
   
                //计算小图的位置
                let smallLeft = $("#smallBox").offset().left;
                let smallTop = $("#smallBox").offset().top;
                //显示大图的位置
                $("#bigBox").show().offset({
   
                    left: smallLeft + 400 + 10,
                    top: smallTop
                })
                //放大镜出现
                $("#zoom").show();
                //鼠标滑动事件
                $(this).mousemove(function (e) {
   
                    //鼠标在小图上的位置
                    let mLeft = e.pageX - smallLeft;
                    let mTop = e.pageY - smallTop;
                    
                    //设置放大镜元素的位置
                    let zLeft = Math.min(Math.max(mLeft - 100,0),200);//防止移动到smallBox外面
                    let zTop = Math.min(Math.max(mTop - 100,0),200);
                    //控制zoom元素并且跟着鼠标运动
                    $("#zoom").css("left",zLeft + "px").css("top",zTop + "px");
                    //控制大图显示部分内容
                    $("#bigBox").scrollLeft(zLeft * 2).scrollTop(zTop * 2);//放大倍数要对应
                })

            }).mouseleave(function () {
   
                //放大后的图片隐藏
                $("#bigBox").hide();

                //放大镜元素隐藏
                $("#zoom").hide();
            })
        })