jquery实现点击图片全屏查看功能

 

js代码

$('img').click(function () {
    //获取图片路径
    var imgsrc = $(this).attr("src");
    console.log(imgsrc);
    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();
    });

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: 1000;
        top: 0;
        left: 0;
    }