//css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
width: 430px;
position: relative;
}
.top {
position: relative;
}
.top img {
width: 430px;
height: 430px;
}
.top .mask {
width: 125px;
height: 125px;
background-image: url(./imgs/x.png);
background-repeat: repeat;
position: absolute;
top: 0;
left: 0;
display: none;
}
.bottom {
width: 100%;
display: flex;
justify-content: space-around;
}
.bottom img {
width: 80px;
border: 2px solid transparent;
}
.bottom img:nth-child(1) {
border-color: black;
}
.right {
position: absolute;
left: 100%;
top: 0;
width: 430px;
height: 430px;
background-image: url(http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg);
/* 把小块选中的部分放大到整个框,因此放大倍数是整个框的 430/125
所以:背景图的大小是:430*430/125 */
background-size: 1479.2px 1479.2px;
display: none;
}
//html
<section>
<div class="top">
<img src="http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
<div class="bottom">
<img src="http://img3.imgtn.bdimg.com/it/u=4219800219,733625680&fm=26&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=2229346952,2661940409&fm=26&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=3034796926,1232782802&fm=26&gp=0.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=1025011724,3729989080&fm=26&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=2269733242,3144838317&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
</div>
</section>
//jquery
<script src="./jquery/jquery-3.4.1.js"></script>
<script>
// 选中小图 上方切换大图
// 用它记录选中的小图的索引
var eleIndex = 0;
$('.bottom img').mouseover(function () {
// 在选中图,修改eleIndex之前,eleIndex实际就代表上一次选中图的索引
// console.log(eleIndex);
// 把上次选中小图的边框线颜色改为透明色
$(`.bottom img:eq(${eleIndex})`).css('border-color', 'transparent')
// 获取当前标签的索引
eleIndex = $(this).index();
// 获取src的属性值
var src = $(this).attr('src');
$('.top img').attr('src', src);
// 改变右侧背景图片
$('.right').css('background-image', `url(${src})`);
// eleIndex修改之后就代表本次选中小图的索引
$(`.bottom img:eq(${eleIndex})`).css('border-color', 'black')
// $(this).css('border-color', 'black');
})
// 遮罩层还有右侧大图显隐操作
$('.top').mouseenter(function () {
// 将找到的标签添加到上一个jquery对象中,这个时候哦
$('.mask').add('.right').show();
}).mouseleave(function () {
$('.mask').add('.right').hide();
})
// 监听鼠标移动事件 遮罩层随着鼠标移动
$('.top').mousemove(function (event) {
// jquery绑定事件中,event对象是jquery封装的对象,通过.originalEvent找到原生的JS DOM Event对象的坐标点
// pageX:鼠标点距离浏览器可视区域左边界的距离
// offset().left:标签距离浏览器可视区域左边界的距离
// 距左边的距离
var left = event.originalEvent.pageX - $(this).offset().left - 62.5;
// 距上边的距离
var top = event.originalEvent.pageY - $(this).offset().top - 62.5;
// 注意临界的问题 有效的取值范围是 [0,430-125]
if (left < 0) {
left = 0
}
if (left > 305) {
left = 305
}
if (top < 0) {
top = 0
}
if (top > 305) {
top = 305
}
$('.mask').css({
// 当名字和值保持一致的时候 写一个就可以
// top:top,
// left:left
top,
left
})
$('.right').css('background-position',`${-1*left*3.44}px ${-1*top*3.44}px`);
})
</script>