HTML图片点击放大---关闭 

<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\tu.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
        <td><img src="D:\image\timg.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
        <td><img src="D:\image\aaa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
        <td><img src="D:\image\bb.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
        <td><img src="D:\image\aa.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路径别忘了改成你自己的（针对新手）

posted @ 2019-08-02 14:58  云飞扬-88  阅读(569)  评论(0)  编辑  收藏  举报