简单实现图片点击放大功能

需要引用jQuery的js 插件

CSS的代码

 /*使图片在浏览器中居中显示*/
     .bigImg {
         position: absolute;
         top: 50%;
         left: 50%;
         /*图片向左移动自身宽度的50%, 向上移动自身高度的50%。*/
         transform: translate(-50%,-50%);
     }
     /*遮罩层*/
     .opacityBottom {
         width: 100%;
         height: 100%;
         position: fixed;
         background: rgba(0,0,0,0.8);
         z-index: 9999;
         top: 0;
         left: 0;
     }

html的代码，因为只需要实现简单的图片放大的功能，所以html的代码直接放上图片即可。

注意下面js的第一行代码，$('#enlarge').click(function ()，enlarge是一个id，想要在图片实现单击图片放大操作，最简单的办法，就是在每一个img图片后面放上一个ID，也可继续优化统一使用一个ID。

<img src="~/Content/image/Snipaste.png" id="enlarge" />

js的代码，下面

<script>
        $('#enlarge').click(function () {
            //获取图片路径
            var imgsrc = $("#enlarge").attr("src");
            var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + imgsrc + '"></div>';
            $(document.body).append(opacityBottom);
            toBigImg();//变大函数
        });

        function toBigImg() {
            $(".opacityBottom").addClass("opacityBottom");//添加遮罩层
            $(".opacityBottom").show();
            $("html,body").addClass("none-scroll");//下层不可滑动
            $(".bigImg").addClass("bigImg");//添加图片样式
            $(".opacityBottom").click(function () {//点击关闭
                $("html,body").removeClass("none-scroll");
                $(".opacityBottom").remove();
            });
        }
    </script>