js点击图片放大

HTML代码：

1 <img id="img0" src="" style="padding-right:10px; " />
2 
3 <div id="myModal" class="modal">                     
4 <!-- 关闭按钮 -->
5 <span class="close"onclick="document.getElementById('myModal').style.display='none'">&times;</span>                     
6 <!-- 弹窗内容 -->
7 <img class="modal-content" id="img_content">
8 </div>

CSS布局：imgbig.css

 1 /**
 2   *autor:zouyh 2018/10/25
 3   */
 4   
 5 /* 触发弹窗图片的样式 */
 6 #myImg {
 7     border-radius: 5px;
 8     cursor: pointer;
 9     transition: 0.3s;
10 }
11  
12 #myImg:hover {opacity: 0.7;}
13  
14 /* 弹窗背景 */
15 .modal {
16     display: none; /* Hidden by default */
17     position: fixed; /* Stay in place */
18     z-index: 1; /* Sit on top */
19     padding-top: 100px; /* Location of the box */
20     left: 281px;
21     top: 0;
22     width: 100%; /* Full width */
23     height: 100%; /* Full height */
24     overflow: auto; /* Enable scroll if needed */
25     background-color: rgb(0,0,0); /* Fallback color */
26     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
27 }
28  
29 /* 图片 */
30 .modal-content {
31     margin: auto;
32     display: block;
33     width: 45%;
34     max-width: 45%;
35     height: 90%;
36 }
37  
38  
39 /* 添加动画 */
40 .modal-content, #caption { 
41     -webkit-animation-name: zoom;
42     -webkit-animation-duration: 0.6s;
43     animation-name: zoom;
44     animation-duration: 0.6s;
45 }
46  
47 @-webkit-keyframes zoom {
48     from {-webkit-transform:scale(0)} 
49     to {-webkit-transform:scale(1)}
50 }
51  
52 @keyframes zoom {
53     from {transform:scale(0)} 
54     to {transform:scale(1)}
55 }
56  
57 /* 关闭按钮 */
58 .close {
59     position: absolute;
60     top: 15px;
61     right: 35px;
62     color: #f1f1f1;
63     font-size: 40px;
64     font-weight: bold;
65     transition: 0.3s;
66 }
67  
68 .close:hover,
69 .close:focus {
70     color: #bbb;
71     text-decoration: none;
72     cursor: pointer;
73 }
74  
75 /* 小屏幕中图片宽度为 100% */
76 @media only screen and (max-width: 600px){
77     .modal-content {
78         width: 100%;
79     }
80 }

js实现：

 1 $("#img0").click(function(){
 2     // 获取弹窗
 3     var modal = document.getElementById('myModal');
 4     modal.style.display = "block";
 5     // 获取图片插入到弹窗
 6     var modalImg = document.getElementById("img_content");
 7     modalImg.src = zpadress;                     
 8     // 获取 <span> 元素，设置关闭按钮
 9     var span = document.getElementsByClassName("close")[0];
10     // 当点击 (x), 关闭弹窗
11     span.onclick = function() { 
12      modal.style.display = "none";
13     };                            
14 });

猜你喜欢