jquery点击图片放大功能

js代码

       $('#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();
            });
        }

enlarge是原图片的id

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;
}