jq-放大镜

    <!-- 思路： -->
<!-- 1、先建造两个盒子 放两张图片 注意一下比例
2、在下面放三张照片
3、建立一个josn 创建对象
4、请求数据 -->
数据：

    [
        {
            "id": 1,
            "imgs": ["1.jpg", "0.jpg", "7.jpg"]
        },
        {
            "id": 2,
            "imgs": ["4.jpg", "3.jpg", "9.jpg"]
        },
        {
            "id": 3,
            "imgs": ["5.jpg", "2.jpg", "8.jpg"]
        }
    ]

```css
    <style>
        .left {
            width: 400px;
            border: 1px #ccc solid;
            position: relative;
        }

        .imgss {
            width: 400px;
            height: 400px;
            background: url(./img/0.jpg) 0 / 100% 100%;
            background-color: red;
        }

        .list {
            width: 400px;
            height: 60px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;

        }


        .list img {
            border: 1px solid transparent;
        }

        .list img.active {
            border-color: #ccc;
        }

        .right {
            width: 500px;
            height: 500px;
            position: absolute;
            background-color: gold;
            background: url(./img/9.jpg);
            display: none;
        }

        .shadow {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 217, 0, 0.291);
            position: absolute;
            display: none;
        }
    </style>

  <div class="left">
        <div class="imgss">
            <div class="shadow">

            </div>
        </div>
        <div class="list">
        </div>
    </div>
    <div class="right"></div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        let right = $('.right')
        let imgss = $('.imgss')

        $.get('./data.json', function (res) {
            res.forEach((r, i) => {
                let img = $('<img>')
                img.attr({ 'src': `./img/${r.imgs[0]}` })
                if (i === 0) img.addClass('active')
                img.mouseenter(function () {
                    $(this).addClass('active').siblings().removeClass('active')
                    imgss.css('backgroundImage', `url(./img/${r.imgs[1]})`)
                    right.css('backgroundImage', `url(./img/${r.imgs[2]})`)
                })
                $('.list').append(img)
            })

            let l = imgss.offset().left + imgss.innerWidth()
            let t = imgss.offset().top
            right.css({
                left: l,
                top: t
            })

            imgss.hover(function () {
                right.css('display', 'block')
                $('.shadow').css('display', 'block')
            },
                function () {
                    right.css('display', 'none')
                    $('.shadow').css('display', 'none')
                }
            )

            imgss.mousemove(function (e) {
                let x = e.pageX - imgss.offset().left
                let y = e.pageY - imgss.offset().top
                x = (x / imgss.innerWidth()) * 100 + '%'
                y = (y / imgss.innerHeight()) * 100 + '%'
                right.css('backgroundPosition', `${x} ${y}`)


                //移动阴影层
                let xx = e.pageX - $('.left').offset().left - ($('.shadow').outerWidth() / 2)
                let yy = e.pageY - $('.left').offset().top - ($('.shadow').outerHeight() / 2)
                if (xx < 0) xx = 0
                if (yy < 0) yy = 0
                let maxLeft = $('.left').outerWidth() - $('.shadow').outerWidth()
                let maxTop = $('.imgss').outerHeight() - $('.shadow').outerHeight()
                if (xx > maxLeft) xx = maxLeft
                if (yy > maxTop) yy = maxTop
                $('.shadow').css({
                    left: xx,
                    top: yy
                })
            })

        })
    </script>