直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.small-img {
cursor: zoom-in;
}
.wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: none;
}
.box {
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, .3);
}
.box img {
display: inline-block;
transition: all .2s;
cursor: zoom-out;
}
</style>
</head>
<body>
<img class="small-img js-small-img" src="../images/01.jpg" />
<div class="wrap js-wrap">
<div class="box js-box">
<img class="big-img js-big-img" src="">
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('.js-box').width($(window).width());
$('.js-box').height($(window).height());
$('.js-small-img').click(function () {
$('.js-big-img').attr('src', $(this).attr('src'));
$('.js-wrap').fadeIn();
});
$('.js-box').click(function () {
$('.js-wrap').fadeOut();
});
</script>
</body>
</html>