Javascript简单实现点击图片放大展示

CSS样式

#outerdiv {
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.7);
    z-index:999;
    width:100%;
    height:100%;
    display:none;
}
#innerdiv {
    position:absolute;
    left: calc(50% - 128px);
    top: calc(50% - 128px)
}
#bigimg {
    border:5px solid #fff;
}

HTML代码

<div id="outerdiv">
    <div id="innerdiv">
        <img id="bigimg" src="" />
    </div>
    <div id="deldiv" style="position: absolute;"><button type="button" id="delete_image" class="btn btn-khaki" style="width: 60px;">删除</button></div>
</div>

Javascript

pimg是自定义class名称，并不会对样式产生影响。

$(".pimg").click(function(){
    var src = $(this).attr("src");
    if(src.indexOf("border-rectangle.png") != -1) return false;
    $('#bigimg').attr("src", src);
    $('#delete_image').attr("onclick", "sateishosai.deleteImageTmp('#" + $(this).attr("id") + "')");

    var windowW = $(window).width();
    var windowH = $(window).height();

    var realWidth = $(this).prop("naturalWidth");
    var realHeight = $(this).prop("naturalHeight");

    var scale = 0.8;
    var imgWidth = realWidth;
    var imgHeight = realHeight;
    if (realWidth > windowW * scale) {
        imgWidth = windowW * scale;
        mgHeight = imgWidth / realWidth * realHeight;
        if (imgHeight > windowH * scale) {
            imgHeight = windowH * scale;
            imgWidth = imgHeight / realHeight * realWidth;
        }
    }
    if (realHeight > windowH * scale) {
        imgHeight = windowH * scale;
        imgWidth = imgHeight / realHeight * realWidth;
        if (imgWidth > windowW * scale) {
            imgWidth = windowW * scale;
                mgHeight = imgWidth / realWidth * realHeight;
        }
    }
    $('#bigimg').css("width",imgWidth);

    var w = (windowW - imgWidth) / 2;
    var h = (windowH - imgHeight) / 2;
    $('#innerdiv').css({"top":h, "left":w});
    $('#deldiv').css({"top" : h + imgHeight + 20, "left":windowW/2 - 30});
    $('#outerdiv').fadeIn("fast");
});

$('#outerdiv').click(function(){
    $(this).fadeOut("fast");
});