<html lang="en"> <head> <meta charset="UTF-8"> </head> <style> .img_content { display: none; position: absolute; margin: 5% 0 0 40%; background-color: white; z-index:1002; overflow: auto; border: solid 1px #3488db; height:560px; width:420px; } .colse_btn { border: solid 1px #3488db; color: white; margin: 5px 10px 0 0; height: 30px; line-height:30px; width: 60px; background: #3488db; border-radius: .5em; display: inline-block; outline: none; cursor: pointer; text-align: center; float:right; } </style> <body> <table border="1"> <tr> <td><img src="D:image u.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td> <td><img src="D:image img.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td> <td><img src="D:imageaaa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td> <td><img src="D:imageb.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td> <td><img src="D:imageaa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td> </tr> </table> <div class="img_content" id="imgContent"> <div style="margin: 10px 10px 0 10px;"><img src="" width="400px" height="500px" id="imgCon"></div> <div class="colse_btn" onclick="col()">关闭</div> </div> <script> function col() { document.getElementById('imgContent').style.display='none'; } function showImg(url) { document.getElementById('imgCon').src = url; document.getElementById('imgContent').style.display='block'; } </script> </body> </html>
备注：img标签里的src路径别忘了改成你自己的（针对新手）