jquery点击图片变大，再点击回复如初

第一步引入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>

效果图如下