JS DOM练习2图片放大镜

放到JSON文件中

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

 <style>
        #left {
            width: 300px;
            height: 400px;
            margin: 150px;
            border: 1px solid #ccc;
            position: relative;
        }

        #img {
            height: 300px;
        }

        #list {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 100px;
        }

        #list img {
            border: 1px solid transparent
        }

        #list img.active {
            border: 1px solid #ccc;
        }

        #right {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background: green;
            position: absolute;
            top: 0;
            display: none;
            left: 300px;
        }

        .shadow {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 150px;
            height: 150px;
            background: rgba(255, 217, 0, 0.24);
            cursor: move;
        }
    </style>

<div id="left">
			<div id="img" style="background: url(./img/1.jpg) 0 / 100% 100%;">
				<div class="shadow"></div>
			</div>
			<div id="list">

			</div>
		</div>
		<div id="right" style="background: url(./img/2.jpg) center;"></div>
		<script>
			function $(str) {
				return document.querySelector(str)
			}

			window.onload = function() {

				let ajax = new XMLHttpRequest()
				ajax.open('GET', './data.json', true)
				ajax.send()
				ajax.onreadystatechange = () => {
					if (ajax.readyState === 4) {
						if (ajax.status === 200) {
							let arr = JSON.parse(ajax.response)
							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 = () => {
								$('.shadow').style.display = 'block'
								$('#right').style.display = 'block'
							}

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

							$("#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"
							}


						}
					}
				}
			}
		</script>