图片点击放大

最新推荐文章于 2024-04-17 05:10:14 发布

风筱默染

最新推荐文章于 2024-04-17 05:10:14 发布

阅读量377

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/m0_51700376/article/details/121465161

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE 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;
    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 >
	<tr>
		<td><img src="./images/1.jpg" width="40px" height="50px" onclick="showImg(this.src)"></td>
		<td><img src="./images/2.jpg" width="40px" height="50px" onclick="showImg(this.src)"></td>
		<td><img src="./images/3.jpg" width="40px" height="50px" onclick="showImg(this.src)"></td>
		<td><img src="./images/4.jpg" width="40px" height="50px" onclick="showImg(this.src)"></td>
		<td><img src="./images/5.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>

风筱默染

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片点击放大

<!DOCTYPE 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;
复制链接

扫一扫