| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Document</title>
|
| <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>
|
| </head>
|
|
|
| <body>
|
| <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>
|
| </body>
|
|
|
| </html> |
