<!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>