css
#enlarge-div {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
#enlarge-div:hover {
cursor: zoom-out;
}
#enlarge-div #inner-div {
width: 80%;
height: 85%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#enlarge-div #inner-div #big-img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
html
<div id="enlarge-div">
<div id="inner-div">
<img id="big-img" src=""/>
</div>
</div>
javascript
$(function () {
$(".enlarge-img").click(function () {
$("#big-img").attr("src", $(this).attr("src"));
$("#enlarge-div").fadeIn("fast");
$("#enlarge-div").click(function () {
$(this).fadeOut("fast");
});
});
});
最后,img标签加上class
class="enlarge-img"