点击放大图片

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://blog.only666.top/js/jquery.js"></script> 
<style>
        html,body{
            background: red;
            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: 1000px;
            height:auto;
            position: absolute;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            left: 50%;
        }
    </style>

</head>
<body>

    <img class="pic01" src="http://blog.only666.top/wp-content/uploads/2020/04/timg.jpg" alt="">
    <img class="pic01" src="http://blog.only666.top/wp-content/uploads/2020/04/banner.jpg" 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>
</body>
</html>