<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>点击图片显示大图</title>
<style>
img {
padding: 0;
width: 100px;
height: auto;
z-index: 5;
}
#outer {
width: 100%;
height: 100%;
margin-top: 300px;
}
/*重要css*/
.overlay {
position: fixed;
overflow:auto;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: transparent;
-webkit-transform: scale(0.01);
-moz-transform: scale(0.01);
-ms-transform: scale(0.01);
-o-transform: scale(0.01);
transform: scale(0.01);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.overlay.overlay-visible {
transform: scale(1);
background-color: #000;
}
.overlayimg {
position: absolute;
z-index: 11;
left: 0;
top: 50%;
width: 100%;
}
</style>
<script>
function showImg(e) {
document.getElementById("overlay-warp").style.opacity=1;
var img = document.createElement("img");
img.setAttribute("class", "overlayimg");
img.src = this.getAttribute("src");
var clientWidth=document.documentElement.clientWidth;
var clientHeight=document.documentElement.clientHeight;
var imgWidth=this.width;
var imgHeight=this.height;
var percent=clientWidth/imgWidth;
var realH=imgHeight*percent;
var marginTop=0;
if(realH>clientHeight){
marginTop=clientHeight/2;
}else {
marginTop=realH/2;
}
img.style.marginTop=-marginTop+"px";
var overlayEle = document.getElementById("overlay");
overlayEle.appendChild(img);
overlayEle.className ="overlay overlay-visible";
}
window.onload = function () {
var imgs = document.getElementsByClassName("canShowBigImg");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = showImg;
}
var overlayEle = document.getElementById("overlay");
overlayEle.onclick=function (e) {
if(document.getElementsByClassName("overlayimg").length==1){
var currentTarget=e.currentTarget;
setTimeout(function (e) {
currentTarget.removeChild(document.getElementsByClassName("overlayimg")[0]);
document.getElementById("overlay-warp").style.opacity=0;
},150);
currentTarget.className="overlay";
}
}
}
</script>
</head>
<body>
<div id="outer">
<p>点击图片</p>
<img class="canShowBigImg" src="../6cdb8f0a-e6e0-11e6-a9ae-00163e0c001e.jpg"/>
<img class="canShowBigImg" src="../00f9335c-cdbb-11e6-9923-00163e0c1e1c.jpg"/>
<div id="overlay-warp">
<div id="overlay" class="overlay">
</div>
</div>
</div>
</body>
</html>