代码很简单，在这里就不过多阐述，先上示例图：
实现过程：
html部分代码很简单
1 <div id="outer"> 2 <p>点击图片</p> 3 <img src="image/0.gif" title="点击图片放大缩小" /> 4 <img src="image/项目管理十大知识领域逻辑关系.png" title="点击图片放大缩小" /> 5 </div>
js部分
1 function expandPhoto(){ 2 var overlay = document.createElement("div"); //创建div 3 overlay.setAttribute("id","overlay"); //给div添加id 4 overlay.setAttribute("class","overlay"); //给div添加class 5 document.body.appendChild(overlay); //向页面中显示此div 6 7 var img = document.createElement("img"); 8 img.setAttribute("class","overlayimg"); 9 img.src = this.getAttribute("src"); 10 document.getElementById("overlay").appendChild(img); 11 12 img.onclick = restore; 13 } 14 function restore(){ 15 document.body.removeChild(document.getElementById("overlay")); 16 document.body.removeChild(document.getElementById("img")); 17 } 18 window.onload = function(){ 19 var imgs = document.getElementsByTagName("img");//找到所有img 20 imgs[0].focus(); 21 for(var i = 0;i<imgs.length;i++){ 22 imgs[i].onclick = expandPhoto; //绑定点击事件，执行方法 23 imgs[i].onkeydown = expandPhoto; 24 } 25 26 }
css部分（主要是针对新增div的样式）
1 img{padding:5px;width:100px;height:auto;cursor: pointer;} 2 #outer{ 3 width:100%; 4 height:100%; 5 } 6 .overlay{ 7 background-color:#000; 8 opacity: .7; 9 filter:alpha(opacity=70); 10 position: fixed; 11 top:0; 12 left:0; 13 width:100%; 14 height:100%; 15 z-index: 10; 16 } 17 .overlayimg{ 18 position: absolute; 19 z-index: 11; 20 left:24%; 21 top:55px; 22 width:auto; 23 cursor: pointer; 24 }
全部代码（修改图片途径即可）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title>点击图片显示大图</title> 6 <style> 7 img{padding:5px;width:100px;height:auto;cursor: pointer;} 8 #outer{ 9 width:100%; 10 height:100%; 11 } 12 .overlay{ 13 background-color:#000; 14 opacity: .7; 15 filter:alpha(opacity=70); 16 position: fixed; 17 top:0; 18 left:0; 19 width:100%; 20 height:100%; 21 z-index: 10; 22 } 23 .overlayimg{ 24 position: absolute; 25 z-index: 11; 26 left:24%; 27 top:55px; 28 width:auto; 29 cursor: pointer; 30 } 31 </style> 32 <script> 33 function expandPhoto(){ 34 var overlay = document.createElement("div"); //创建div 35 overlay.setAttribute("id","overlay"); //给div添加id 36 overlay.setAttribute("class","overlay"); //给div添加class 37 document.body.appendChild(overlay); //向页面中显示此div 38 39 var img = document.createElement("img"); 40 img.setAttribute("class","overlayimg"); 41 img.src = this.getAttribute("src"); 42 document.getElementById("overlay").appendChild(img); 43 44 img.onclick = restore; 45 } 46 function restore(){ 47 document.body.removeChild(document.getElementById("overlay")); 48 document.body.removeChild(document.getElementById("img")); 49 } 50 window.onload = function(){ 51 var imgs = document.getElementsByTagName("img");//找到所有img 52 imgs[0].focus(); 53 for(var i = 0;i<imgs.length;i++){ 54 imgs[i].onclick = expandPhoto; //绑定点击事件，执行方法 55 imgs[i].onkeydown = expandPhoto; 56 } 57 58 } 59 </script> 60 </head> 61 <body> 62 <div id="outer"> 63 <p>点击图片</p> 64 <img src="image/0.gif" title="点击图片放大缩小" /> 65 <img src="image/项目管理十大知识领域逻辑关系.png" title="点击图片放大缩小" /> 66 </div> 67 </body> 68 </html>