图片全屏预览实现

要实现图片的全屏预览，主要知识点有一下几个：

（1）点击图片弹出弹出层

（2）获取已点击图片的图片地址

（3）弹出层样式处理（包括背景透明度、图片居中等）

（4）点击屏幕弹出层消失

代码实现：

HTML：主要是显示图片并创建弹出层

<div id="container" class="container">    <img src="gongju1.png" alt=""/>    <img src="gongju2.png" alt=""/>    <img src="gongju3.jpg" alt=""/>    <img src="gongju4.png" alt=""/></div><div id="popup">    <div class="bg"><img src="" alt=""/></div></div>

JS：纯js实现

var imgs = document.getElementById("container").getElementsByTagName("img");    var lens = imgs.length;    var popup = document.getElementById("popup");    for(var i = 0; i < lens; i++){        imgs[i].onclick = function (event){            event = event||window.event;            var target = document.elementFromPoint(event.clientX, event.clientY);            showBig(target.src);        }    }    popup.onclick = function (){        popup.style.display = "none";    }    function showBig(src){        popup.getElementsByTagName("img")[0].src = src;        popup.style.display = "block";    }

也可添加jquery库，利用jquery实现：

//jquery版$("img").each(function(index, obj){$(this).click(function(){event = event || window.event;var target = document.elementFromPoint(event.clientX, event.clientY);            showBig(target.src);});});$("#popup").click(function(){$("#popup").css({"display":"none"});});function showBig(src){$("#popup img:first").attr("src",src);$("#popup").css({"display":"block"});}

jquery实现以及js实现的原理都是一样的，但是jquery实现了类CSS选择器，对于DOM节点的获取更为简便。

CSS：样式处理

.container {            width: 600px;            margin: 0 auto;        }        .container img{            width: 45%;            margin-right: 5%;            margin-bottom: 30px;            float: left;        }        /*弹出层样式*/        #popup{            position: fixed;            left: 0px;            top: 0px;            width: 100%;            height: 100%;            text-align: center;            display: none;                 }        #popup .bg{            background-color: rgba(0,0,0,0.5);            width: 100%;            height: 100%;        }        @media \0screen\,screen\9 {            #popup .bg{                background-color:#000000;                filter:Alpha(opacity=50);                position:static;            }            #popup .bg img{                position: relative;                           }        }        #popup img{            max-width: 100%;            max-height: 100%;            /*以下三行实现垂直居中*/            margin: auto;    position: absolute;   top: 0; left: 0; bottom: 0; right: 0;  /*以上三行实现垂直居中*/        }

需要注意的是，为了使弹出层显示的图片根据浏览器窗口大小垂直居中，带注释的三行代码是必不可少的。当然，如果需求并不是水平垂直居中，那直接编辑对应的CSS样式即可！

效果图：

以上!