jquery放大镜代码

//css
 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

        .top {
            position: relative;
        }

        .top img {
            width: 430px;
            height: 430px;
        }


        .top .mask {
            width: 125px;
            height: 125px;
            background-image: url(./imgs/x.png);
            background-repeat: repeat;
            position: absolute;
            top: 0;
            left: 0;

            display: none;
        }

        .bottom {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .bottom img {
            width: 80px;
            border: 2px solid transparent;
        }

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

        .right {
            position: absolute;
            left: 100%;
            top: 0;
            width: 430px;
            height: 430px;
            background-image: url(http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg);
            /* 把小块选中的部分放大到整个框，因此放大倍数是整个框的 430/125
所以：背景图的大小是：430*430/125 */
            background-size: 1479.2px 1479.2px;
            display: none;
        }

//html
  <section>
        <div class="top">
            <img src="http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg" alt="">
            <!-- 遮罩层 -->
            <div class="mask"></div>
        </div>
        <div class="bottom">
            <img src="http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg" alt="">
            <img src="http://img3.imgtn.bdimg.com/it/u=2229346952,2661940409&fm=26&gp=0.jpg" alt="">
            <img src="http://img0.imgtn.bdimg.com/it/u=3034796926,1232782802&fm=26&gp=0.jpg" alt="">
            <img src="http://img2.imgtn.bdimg.com/it/u=1025011724,3729989080&fm=26&gp=0.jpg" alt="">
            <img src="http://img3.imgtn.bdimg.com/it/u=2269733242,3144838317&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="right">

        </div>
    </section>

//jquery
<script src="./jquery/jquery-3.4.1.js"></script>
<script>
    // 选中小图 上方切换大图
    // 用它记录选中的小图的索引
    var eleIndex = 0;
    $('.bottom img').mouseover(function () {
        // 在选中图，修改eleIndex之前，eleIndex实际就代表上一次选中图的索引
        // console.log(eleIndex);
        // 把上次选中小图的边框线颜色改为透明色
        $(`.bottom img:eq(${eleIndex})`).css('border-color', 'transparent')
        // 获取当前标签的索引
        eleIndex = $(this).index();
        // 获取src的属性值
        var src = $(this).attr('src');
        $('.top img').attr('src', src);

        // 改变右侧背景图片
        $('.right').css('background-image', `url(${src})`);

        // eleIndex修改之后就代表本次选中小图的索引
        $(`.bottom img:eq(${eleIndex})`).css('border-color', 'black')
        // $(this).css('border-color', 'black');
    })
    // 遮罩层还有右侧大图显隐操作
    $('.top').mouseenter(function () {
        // 将找到的标签添加到上一个jquery对象中，这个时候哦 
        $('.mask').add('.right').show();
    }).mouseleave(function () {
        $('.mask').add('.right').hide();
    })
    // 监听鼠标移动事件 遮罩层随着鼠标移动
    $('.top').mousemove(function (event) {
        // jquery绑定事件中，event对象是jquery封装的对象，通过.originalEvent找到原生的JS DOM 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 (left > 305) {
            left = 305
        }
        if (top < 0) {
            top = 0
        }
        if (top > 305) {
            top = 305
        }
        $('.mask').css({
            // 当名字和值保持一致的时候 写一个就可以
            // top:top,
            // left:left
            top,
            left
        })
        $('.right').css('background-position',`${-1*left*3.44}px ${-1*top*3.44}px`);
    })
</script>