html网页中,点击缩略图,图片可以被放大查看

RetutghbxLouis 2024-07-02 14:38:57

实现这样的功能可以通过 HTML、CSS 和 JavaScript 来完成。下面是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大查看</title>
<style>
  /* 模糊背景样式 */
  .modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  /* 放大图片容器 */
  .modal-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
  }
  
  /* 关闭按钮样式 */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    z-index: 1000;
  }
  
  /* 图片样式 */
  .modal-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
</style>
</head>
<body>

<!-- 缩略图 -->
<img src="thumbnail.jpg" alt="缩略图" onclick="openModal('fullsize.jpg')" style="width: 200px; height: auto; cursor: pointer;">

<!-- 放大查看模态框 -->
<div id="myModal" class="modal-bg" onclick="closeModal()">
  <div class="modal-content">
    <span class="close-btn" onclick="closeModal()">&times;</span>
    <img id="modalImg" class="modal-img" src="" alt="放大图片">
  </div>
</div>

<script>
  // 打开模态框并显示放大的图片
  function openModal(imgSrc) {
    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById('modalImg');
    modal.style.display = 'flex'; // 显示模态框
    modalImg.src = imgSrc; // 设置放大的图片地址
    document.body.style.overflow = 'hidden'; // 隐藏页面滚动条
  }

  // 关闭模态框
  function closeModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = 'none'; // 隐藏模态框
    document.body.style.overflow = 'auto'; // 恢复页面滚动条
  }
</script>

</body>
</html>

解释说明:

  1. HTML 结构

    • <img> 标签用作缩略图,设置了一个点击事件 onclick="openModal('fullsize.jpg')",点击时调用 openModal 函数并传入放大图片的路径。
    • <div id="myModal"> 是模态框的容器,设置了一个点击事件 onclick="closeModal()",用于关闭模态框。
  2. CSS 样式

    • .modal-bg 定义了模糊背景的样式,使用了 backdrop-filter: blur(10px); 来实现毛玻璃效果。
    • .modal-content 设置了放大图片的容器样式,包括最大宽度和高度限制。
    • .close-btn 定义了关闭按钮的样式,通过绝对定位来放置在图片的右上角。
  3. JavaScript 功能

    • openModal(imgSrc) 函数用于打开模态框并显示放大的图片,接收一个参数 imgSrc 表示放大图片的路径。
    • closeModal() 函数用于关闭模态框,并恢复页面滚动条的显示。
...全文
471 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

10

社区成员

发帖
与我相关
我的任务
社区描述
一个讨论休闲、娱乐和工作生活平衡的在线社区。
前端软件工程 个人社区
社区管理员
  • 2401_83810323
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧