您的位置：首页 > 其它

居中展示图片

2015-08-31 15:23 253 查看

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

<!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>

效果如下图所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航