代码很简单，在这里就不过多阐述，先上示例图：
实现过程：
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> View Code
- 感谢你的阅读。如果你觉得这篇文章对你有帮助或者有启发，就请推荐一下吧～你的精神支持是博主强大的写作动力。欢迎转载！
- 博主的文章没有高度、深度和广度，只是凑字数。由于博主的水平不高（其实是个菜B），不足和错误之处在所难免，希望大家能够批评指出。
- 欢迎加入.NET 从入门到精通技术讨论群→523490820 期待你的加入
- 不舍得打乱，就永远学不会复原。被人嘲笑的梦想，才更有实现的价值。
- 我的博客： http://www.cnblogs.com/zhangxiaoyong/