居中展示图片

点击预览图片，居中展示原图。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中展示图片</title>
<style>
*{
    margin: 0;
    padding: 0;
}
body{
    height: 2000px;
}
.mask{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    display: none;
}
.img{
    left: 50%;
    top: 50%;
    z-index: 2;
    cursor: pointer;
    width: 100px;
}
</style>
</head>
<body>
    <div class="mask" id="J_Mask"></div>
    <img src="icon/file.png" alt="" class="img">
    <img src="icon/file2.png" alt="" class="img">
    <img src="icon/win.png" alt="" class="img">

<script src="jquery-2.1.4.js"></script>
<script>
(function () {
    var imgBi = $('.img');
    var mask = $('#J_Mask');
    var realWidth;
    var realHeight;

    imgBi.on('click', function () {
        var me = $(this);

        $('<img id="J_ShowImg"/>').attr('src', me.attr('src')).load(function () {
            realWidth = this.width;
            realHeight = this.height;

            $(this).appendTo('body').css({
                'width' : realWidth + 'px',
                'height' : realHeight + 'px',
                'position' : 'absolute',
                'margin-top' : - (realHeight / 2) + 'px',
                'margin-left' : - (realWidth / 2) + 'px'
            }).addClass('img');

            mask.show();
        });
    });

    $(document).on('click', function () {
        if (mask.is(':visible')) {
            mask.hide();
            $('#J_ShowImg').remove();
        }
    });

})();
</script>
</body>
</html>

效果如下图所示：

 

posted @ 2015-08-31 15:23  白小虫  阅读(248)  评论(0)  编辑  收藏  举报