点击图片显示大图

<!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>
点击图片显示大图

Lizzy0077

引用和评论

vuejs 十个最佳实践

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具
