h5页面文章内容中的图片点击放大，再点击还原，用js怎么做到？

具体案例如下
点击图片弹出，再点击X号或者背景弹出层消失

img

img

应该怎么做到的？

写个弹出层，默认不显示，点击图片时候，显示弹出层，点关闭，再隐藏弹出层

自己写个js或者用 jquery插件，去搜索 jQuery图像缩放插件zoom.js

推荐你个插件吧 layer.js 可以实现图中一样的效果.

写一个弹出层
层内包含img标签
点击图片获取图片url
将点击图片url给到弹出层图片

参考如下链接，如果对你有所帮助，望采纳
Jquery 点击图片在弹出层显示大图https://www.cnblogs.com/antis/p/7053991.html

图片的双击事件 抓取当前的dom节点 取src属性
渲染一个弹窗，然后来一个透明遮罩，给遮罩设点击事件点击就关闭掉弹窗以及遮罩
弹窗渲染一个img标签，根据你自己区设置宽高
大体就是这样一个流程了

默认浏览器是带有着对应的长按查看图片事件的

你可以用插件也可以自己写js

这个功能的 逻辑就是 设置一个蒙层 蒙层有个内容 这个内容就是你点击的当前数据 把他展示出来就行,点击蒙层这个可以使用阻止冒泡事件,点击图片也不会关闭,在给对应x也给个关闭的, 当然x没必要放了,


<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- 引入的js文件 -->
  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .mask {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgb(255, 255, 255, .3);
      display: none;
    }

    .main {
      margin: auto;
    }

    .xs {
      display: flex;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="../1.jpg" alt="">
  </div>
  <div class="mask">
    <div class="main"></div>
  </div>
</body>

</html>
<script>
  var box = document.querySelector('.box ');
  var mask = document.querySelector('.mask');
  var main = document.querySelector('.mask .main');
  box.onclick = function () {
    console.log(1);
    main.innerHTML = box.innerHTML
    mask.classList.toggle('xs')
  }
  mask.onclick = function (e) {
    e.stopPropagation()
    event.preventDefault();
    console.log(2);
    mask.classList.toggle('xs')
  }
</script>