效果图-为动图
HTML
<div class="box">
<p>
<img src="../images/1.jpeg" alt="">
</p>
<p>
<img src="../images/2.jpeg" alt="">
</p>
<p>
<img src="../images/3.jpeg" alt="">
</p>
</div>
<div class="show">
<img src="../images/1.jpeg" alt="">
</div>
CSS
<style>
* {
margin: 0;
padding: 0;
}
div.box {
width: 600px;
height: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
border: 5px solid pink;
margin: 50px auto;
cursor: pointer;
}
div>p {
width: 100px;
height: 100px;
}
div>p>img {
width: 100%;
height: 100%;
display: block;
}
.show {
width: 288px;
height: 180px;
position: absolute;
left: 0;
top: 0;
display: none;
pointer-events: none;
}
</style>
JS-需要先引入jQuery文件
可前往jQuery官网下载:jQuery官网
<script src="../js/jquery-2.2.4.js"></script>
<script>
//绑定鼠标移入事件
$(".box p").mouseover(function () {
//获取当前图片的 src
let src = $(this).find('img').prop('src');
//将当前图片的src赋值给大图的src 并出现
$('.show img').prop('src', src);
$('.show').stop().fadeIn(100);
})
//绑定鼠标移出事件
$('.box p').mouseout(function () {
$('.show').stop().fadeOut(100);
})
//绑定鼠标移动事件
$('.box p').mousemove(function (e) {
$('.show').css({ left: e.pageX, top: e.pageY })
})
</script>