写一个js点击图片放大的代码

当然，这个问题很简单，以下是一个基本的实现：

HTML 代码:

<img id="myImg" src="image.jpg" alt="点击放大" width="200" height="200">

<!-- 模态框 -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

CSS 代码:

/* 模态框样式 */
.modal {
  display: none; /* 隐藏模态框 */
  position: fixed; /* 固定位置 */
  z-index: 1; /* 位于顶层 */
  padding-top: 100px; /* 上边距 */
  left: 0;
  top: 0;
  width: 100%; /* 宽度 */
  height: 100%; /* 高度 */
  overflow: auto; /* 允许滚动 */
  background-color: rgb(0,0,0); /* 背景颜色 */
  background-color: rgba(0,0,0,0.9); /* 背景透明度 */
}

/* 模态框内容 */
.modal-content {
  margin: auto; /* 居中 */
  display: block;
  width: 80%; /* 宽度 */
  max-width: 700px; /* 最大宽度 */
}

/* 关闭按钮 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

JavaScript 代码:

// 获取模态框元素
var modal = document.getElementById("myModal");

// 获取图片元素
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

// 当用户点击图片时，打开模态框
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// 获取关闭按钮元素
var span = document.getElementsByClassName("close")[0];

// 当用户点击关闭按钮时，关闭模态框
span.onclick = function() { 
  modal.style.display = "none";
}