(JS+CSS)实现图片放大效果

代码很简单，在这里就不过多阐述，先上示例图：

实现过程：

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

 

posted @ 2016-11-30 14:45  潇十一郎  阅读(2422)  评论(0)  编辑  收藏  举报