第一步引入jquery依赖
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
第二步编写前端body及js部分
<img class="pic01" src="4.png" alt="">
<img class="pic01" src="12.png" alt="">
<!-- 用来要点击变大的照片 -->
<!-- 装载照片变大后的容器 -->
<div class="pic02">
<img src="#" alt="">
</div>
<script>
$('.pic01').on('click',function(){
var picSrc = $(this).attr('src')
$('.pic02 img').attr('src',picSrc)
$('.pic02').show()
})
$('.pic02').on('click',function(){
$('.pic02').hide()
})
</script>
第三步编写css
<style>
html,body{
margin: 0;
padding: 0;
}
img{
width: 100px;
height: 100px;
}
.bigPic{
display: none;
}
.pic02{
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background:rgba(255, 255, 255, 0.678);
}
.pic02 img{
z-index: 11;
width: 300px;
height: 300px;
position: absolute;
top: 50%;
margin-left: -150px;
margin-top: -150px;
left: 50%;
}
</style>
效果图如下