点击预览图片，居中展示原图。
<!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>
效果如下图所示：
时间： 2024-08-01 19:48:32