jQuery放大镜

效果图:

html:

 <section>
        <div class="bottom">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
        </div>
        <div class="top">
            <img src="./img/1.jpg" alt="">
            <div class="mask"></div>
        </div>

        <div class="right"></div>
    </section>

css:

<style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        section {
            width: 430px;
            height: 430px;
        }

        .top {
            position: relative;
        }

        .top img {
            width: 100%;
        }

        .top .mask {
            width: 125px;
            height: 125px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

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

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

        .right {
            position: absolute;
            left: 440px;
            top: 0;
            width: 430px;
            height: 270px;
            background-image: url('../作业/img/1.jpg');
            /* 把小块选中的部分放大到整个框,因此放大倍数是430/125 */
            background-size: 1479.2px 925.36px;

        }
    </style>

jquery:

 <script src="../../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");
            //获取标签的索引
            eleIndex = $(this).index();

            // 根据索引修改上方大图的src
            var src = `../作业/img/${eleIndex + 1}.jpg`;
            $(".top img").attr("src", src);
            console.log(src)
            $('.right').css('background-image', `url(${src})`)
            // eleIndex修改之后,就代表本次选中小图的索引
            $(`.bottom img:eq(${eleIndex})`).css("border-color", "black");

        })

        $(".top").mouseenter(function () {
            $(".mask").add(".right").show();

        })
        $(".top").mouseleave(function () {
            $(".mask").add(".right").hide();

        })

        //监听鼠标移动事件,mask随之运动
        $(".top").mousemove(function (event) {
            // jquery绑定事件中,event对象是jquery封装的对象,通过.orginalEvent可以获取原生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;
            // console.log(left,top)
            var maxX = $('.top img').css('width')
            var maxY = $('.top img').css('height')

            maxY = parseInt(maxY) - 125;
            maxX = parseInt(maxX) - 125;
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            if (left > maxX) {
                left = maxX;
            }
            if (top > maxY) {
                top = maxY;
            }
            $(".mask").css({
                top: top + "px",
                left: left + "px"
            })
            $('.right').css('background-position', `${-1 * left * 3.44}px ${-1 * top * 3.44}px`)
        })
    </script>