利用CSS+JavaScript实现图片预览功能

功能要求：点击图片后，将图片放大，实现预览。
话不多说，直接上代码：
以下为CSS部分：

<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        
        h1{
            text-align: center;
            margin:20px 0;
        }
 
        #imgdiv{
            width: 500px;
            margin:50px auto;
        }
 
        #imgdiv img{
            width: 300px;
            margin:0 100px;
        }
 
        #bigimg{
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0,0,0,0);
            top: 0;
            display: none;
            z-index:999;
        }
 
        #bigimg img{
            width: 1000px;
            margin:auto;
            position: fixed;
            left:0;
            right:0;
            top: 80px;
            cursor: pointer;
        }
    </style>

以下是HTML部分：

<div class="form-group">    
    <label class="col-sm-3 control-label is-required">现场图片：</label>
        <div class="col-sm-8">
            <div id="imgdiv" onclick="imgbig();">
                <img th:src="*{ctdcImg}" id="imgsrc" />
            </div>
        <div id="bigimg" onclick="closeimg();"></div>
     /div>
</div>

以下是script部分：

    <script>
        function imgbig() {S
            var imgsrc = $('#imgsrc').attr('src');
            $("#bigimg").css("display","block");
            $("#bigimg").html("<img src="+imgsrc+" />");
        }
        
        function closeimg() {
            $("#bigimg").css("display","none");
        }
    </script>