图片全屏预览实现

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

（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样式即可！

效果图：

以上!