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

功能要求：点击图片后，将图片放大，实现预览。

效果图：

点击前

点击后：

 

直接上代码：

以下为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() {
		    var imgsrc = $('#imgsrc').attr('src');
		    $("#bigimg").css("display","block");
		    $("#bigimg").html("<img src="+imgsrc+" />");
		}
		
		function closeimg() {
		    $("#bigimg").css("display","none");
		}
    </script>