Overlay 遮罩层

最新推荐文章于 2022-01-19 14:28:19 发布

weixin_30902675

最新推荐文章于 2022-01-19 14:28:19 发布

阅读量305

点赞数

原文链接：http://www.cnblogs.com/wangwenfei/archive/2013/05/28/overlay.html

版权

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        img{padding: 5px;}
        #outer{width: 100%;height: 100%;}
        .overlay{background-color: #000;opacity: .7;filter:alpha(opacity=70);position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 10;}
        .overlayimg{position: absolute;z-index: 11;left: 50px;top: 50px;}
    </style>

    <script type="text/javascript">
        function expandPhoto(){

            var overlay=document.createElement("div");
            overlay.setAttribute("id","overlay");
            overlay.setAttribute("class","overlay");
            document.body.appendChild(overlay);

            var img=document.createElement("img");
            img.setAttribute("id","img");
            img.src=this.getAttribute("data-larger");
            img.setAttribute("class","overlayimg");

            img.onclick=restore;

            document.body.appendChild(img);
        }


        function restore(){
            document.body.removeChild(document.getElementById("overlay"));
            document.body.removeChild(document.getElementById("img"));
        }

        window.onload=function(){
            var imgs=document.getElementsByTagName("img");
            console.log(imgs)
            imgs[0].focus();
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=expandPhoto;
                imgs[i].onkeydown=expandPhoto;
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <img src="juhua.jpg" alt="" data-larger="juhua.jpg">
        <img src="kaola.jpg" alt="" data-larger="kaola.jpg">
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/wangwenfei/archive/2013/05/28/overlay.html

weixin_30902675

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Overlay 遮罩层

<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{padding: 5px;} ...
复制链接

扫一扫