jquery图片跟随放大

 <section>
        <div class="top">
            <img src="../" alt="">
            <div class="mask"></div>
        </div>
        <div class="bottom">
            <img src="../" alt="">
            <img src="../" alt="">
            <img src="../" alt="">
            <img src="../" alt="">
            <img src="../" alt="">
        </div>
        <div class="right"></div>
    </section>

* {
            box-sizing: border-box;
        }

        section {
            width: 430px;
            position: relative;
        }

        .top img {
            width: 100%;
        }

        .top {
            position: relative;
        }

        .top .mask {
            width: 125px;
            height: 125px;
            background-image: url(./....);//照片
            background-repeat: repeat;

            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .bottom img {
            width: 82px;
            border: 1px solid transparent;
        }

        .bottom img:nth-child(1) {
            border-color: black;
        }

        .right {
            position: absolute;
            left: 100%;
            top: 0;
            width: 430px;
            height: 430px;
            background-image: url('./....);//照片
            /*把小块选中得位置放大到整个框,因此放大倍数是430/125
            所以背景图得大小：430*430/125；
            */
            background-size: 1479.2px 1479.2px;
            display: none;
        }
        body{
            padding: 200px;
        }

<script src="../day33jquery/jquery/jquery-3.4.1.js"></script>     //引入
    <script>
        //选中小图，上方切换大图得src
        //记录选中的小图得索引
        var eleIndex = 0
        $('.bottom img').mouseenter(function () {
            //在选中图，修改eleIndex之前，eleIndex实际就代表上一次选中图的索引
            //把上次选中小图的边框线改为透明色
            $(`.bottom img:eq(${eleIndex})`).css('border-color', 'transparent')
            console.log(eleIndex)
            //获取标签的索引
            eleIndex = $(this).index();
            //根据索引修改上方大图得src,右侧背景图
            var src = `../day34DOM操作/imgs/${eleIndex}_big.jpg`
            $('.top img').attr('src', src)
            $('.right').css('background-image',`url(${src})`)

            //eleIndex修改之后，就代表本次选中小图的索引
            $(`.bottom img:eq(${eleIndex})`).css('border-color', 'black')
        })

        //遮罩层，右侧大图 显隐操作
        $('.top').mouseenter(function () {
            //add():将找到的标签添加到上一个jquery对象中
            $('.mask').add('.right').show()
            // $('.right').show()
        })
        $('.top').mouseleave(function () {
            $('.mask').add('.right').hide()
            // $('.right').hide()
        })

        //监听鼠标移动事件,mask随之运动
        $('.top').mousemove(function (event) {
            //jquery绑定事件中，event对象是jquery封装的对象，通过
            // .originalEvent可以获取原生JS DOM Event对象，从而使用event对象
            // 的坐标点
            //pageX：鼠标点距离浏览器可视区域左边的距离
            //offset().left：标签距离浏览器可视区域左边界的距离
            var left = event.originalEvent.pageX - $(this).offset().left - 62.5
            var top = event.originalEvent.pageY - $(this).offset().top - 62.5

            //注意临界问题
            //有效取值范围使[0,430-125]
            if (left < 0) left = 0
            if (top < 0) top = 0
            if (left > 305) left = 305
            if (top > 305) top = 305
            $('.mask').css({
                top,
                left
            })
            $('.right').css('background-position',`${-1*left*3.44}px 
            ${-1*top*3.44}px`) 
        })
    </script>