制作购物商城商品图片放大镜效果

1.准备一大一小两张图片；
2.将图片分别放入一左一右两个盒子里面，大图隐藏；
3.绑定鼠标移入移出事件
4.根据鼠标在小图上的left、top距离，设置大图显示的位置

    window.onload = function () {

切换小图，小图，大图

        let arr = [
            {
                id: 1,
                imgs: ['jd3.jpg', 'jd1.jpg', 'jd2.jpg']
            },
            {
                id: 2,
                imgs: ['jd6.jpg', 'jd4.jpg', 'jd5.jpg']
            },
            {
                id: 3,
                imgs: ['jd9.jpg', 'jd7.jpg', 'jd8.jpg']
            }
        ]

将三种图放到盒子里

        arr.forEach((r, i) => {
            let img = document.createElement('img')
            img.src = 'img/' + r.imgs[0]
            if (i === 0) img.classList.add('active')
            img.onmouseenter = function () {
                let imgs = $('#list').children
                for (let i = 0; i < imgs.length; i++) {
                    imgs[i].classList.remove('active')
                }
                this.classList.add('active')
                $('#img').style['background-image'] = `url(img/${arr[i].imgs[1]})`
                $('#right').style['background-image'] = `url(img/${arr[i].imgs[2]})`
            }
            $('#list').appendChild(img)
        })

        let l = $('#left').offsetLeft + $('#left').offsetWidth
        let t = $("#left").offsetTop

        $('#right').style.left = l + 'px'
        $('#right').style.top = t + 'px'

鼠标移入，大图及放大镜显示

        $('#img').onmouseenter = () => {
            $('#right').style.display = 'block'
            $('.shadow').style.display = 'block'
        }

鼠标移出，大图及放大镜隐藏

        $('#img').onmouseleave = () => {
            $('#right').style.display = 'none'
            $('.shadow').style.display = 'none'
        }

鼠标移动，根据鼠标在小图上的left、top距离，设置大图显示的位置

        $("#img").onmousemove = (e) => {
            let x = e.pageX - $('#left').offsetLeft
            let y = e.pageY - $("#left").offsetTop

            x = x / $('#left').offsetWidth
            y = y / $('#left').offsetHeight

            x = (x * 100).toFixed(4) + "%"
            y = (y * 100).toFixed(4) + "%"


            $("#right").style['background-position-x'] = x
            $("#right").style['background-position-y'] = y

            let xx = e.pageX - $('#left').offsetLeft - ($('.shadow').offsetWidth / 2)
            let yy = e.pageY - $('#left').offsetTop - ($('.shadow').offsetHeight / 2)

            if (xx < 0) xx = 0
            if (yy < 0) yy = 0
            let maxLeft = $('#left').offsetWidth - $('.shadow').offsetWidth
            let maxTop = $('#img').offsetHeight - $('.shadow').offsetHeight
            if (xx > maxLeft) xx = maxLeft
            if (yy > maxTop) yy = maxTop

            $('.shadow').style.left = xx + "px"
            $('.shadow').style.top = yy + "px"
        }

    }