点击图片，图片放大显示功能

jquery点击图片放大功能

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