原生JS和CSS实现点击图片预览放大

Posted 2022-12-13 webchang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS和CSS实现点击图片预览放大相关的知识，希望对你有一定的参考价值。

效果：

代码实现，可以直接复制到本地测试（把图片路径换一下）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.图片预览</title>
  <style>
    .black_overlay 
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 100;
    

    .enlargeContainer 
      display: none;
    

    .enlargePreviewImg 
      /*这里我设置的是：预览后放大的图片相对于整个页面定位*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      /*宽度设置为页面宽度的70%，高度自适应*/
      width: 70%;
      z-index: 200;
    

	/*关闭预览*/
    .close 
      position: absolute;
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 200;
    
  </style>
</head>
<body>

<!--测试图片-->
<img src="./images/maying.jpg" id="toEnlargeImg">

<!--黑色遮罩-->
<div class="black_overlay" id="black_overlay"></div>

<!--预览容器，存放点击放大后的图片-->
<div class="enlargeContainer" id="enlargeContainer">
  <!-- 关闭按钮，一个叉号图片 -->
  <img src="./images/close.png" class="close" id="close">
</div>

<script>
  let black_overlay = document.getElementById('black_overlay');
  let enlargeContainer = document.getElementById('enlargeContainer');
  let closeBtn = document.getElementById('close');

  let toEnlargeImg = document.getElementById('toEnlargeImg');
  toEnlargeImg.addEventListener('click', function () 
    // 获取当前图片的路径
    let imgUrl = this.src;
    // 显示黑色遮罩和预览容器
    black_overlay.style.display = 'block';
    enlargeContainer.style.display = 'block';
    let img = new Image();
    img.src = imgUrl;
    img.classList.add('enlargePreviewImg');
    if (closeBtn.nextElementSibling) 
      enlargeContainer.removeChild(closeBtn.nextElementSibling);
    
    enlargeContainer.appendChild(img);
  );

  // 关闭预览
  closeBtn.addEventListener('click', function () 
    black_overlay.style.display = 'none';
    enlargeContainer.style.display = 'none';
  );
</script>

</body>
</html>

前端学习交流QQ群：862748629 点击加入

以上是关于原生JS和CSS实现点击图片预览放大的主要内容，如果未能解决你的问题，请参考以下文章