代碼很簡單，在這裡就不過多闡述，先上示例圖：
實作過程：
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/