<!-- 思路: -->
<!-- 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>