弹层的显示与隐藏

最新推荐文章于 2021-06-04 19:40:46 发布

小迷糊MJ

最新推荐文章于 2021-06-04 19:40:46 发布

阅读量459

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Mjxiaomihu/article/details/52839158

版权

学习笔记专栏收录该内容

55 篇文章 1 订阅

订阅专栏

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>