1、html
<div class="content" style="margin-top: -30px;">
<div class="title">
<span class="border"></span>
<span class="border"></span>
<span class="text">户型图</span>
<span class="border"></span>
<span class="border"></span>
</div>
<div class="row mt50">
<div class="col-lg-6 col-xs-6 img-responsive" >
<img src="images/pic6.jpg" alt="">
</div>
<div class="col-lg-6 col-xs-6 img-responsive" >
<img src="images/pic7.jpg" alt="">
</div>
<div class="col-lg-6 col-xs-6 img-responsive" >
<img src="images/pic8.jpg" alt="">
</div>
<div class="col-lg-6 col-xs-6 img-responsive" >
<img src="images/pic9.jpg" alt="">
</div>
</div>
<div class="arrow">
<img src="" alt="" style="width: 700px;margin: 25px auto;">
</div>
</div>
2、css
.content{
color: #ffffff;
padding: 50px;
position: relative;
}
.arrow{
width:1000px;
height: 1000px;
background-color:rgba(0,0,0,.7);
position: absolute;
top:180px;
left: -30px;
display: none;
}
.img-responsive{
padding: 5px;
}
.mt50{
margin-top: 50px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
3、js
<script src="js/jquery.min.js"></script>
<script>
$('.img-responsive img').on('click',function(){
var ts = $(this);
console.log(ts.attr('src')) ;
//获取当前被点击的图片的链接地址
var imgLink = ts.attr('src') ;
//改变弹层中图片的链接地址为被点击的图片的链接地址
$('.arrow img').attr('src' , imgLink ) ;
//显示弹层
$('.arrow').show();
});
/*点击弹出层隐藏*/
$('.arrow').on('click',function(){
var ts = $(this);
ts.hide();
});
</script>