点击预览图片，居中展示原图。
<!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>
效果如下图所示：
