jquery实现网页中图片水平垂直居中

言曌 2024年05月22日10:52:09 0 463 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

因为博客上很多小图有时候看不太清，需要放大，一直想解决这个问题，苦于没有时间，今天上午研究了一下，解决方案如下。

当然，目前本站已经加入该功能，大家可以试试，后面有空我再给css加上一个手形的效果

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Modal Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        /* 模态窗口样式 */
        .modal-img {
            display: none; /* 隐藏模态窗口，默认显示方式 */
            position: fixed; /* 固定定位，确保在视口内 */
            z-index: 1000; /* 高于其他元素 */
            left: 0; /* 左边界 */
            top: 0; /* 上边界 */
            width: 100%; /* 全宽 */
            height: 100%; /* 全高 */
            overflow: hidden; /* 隐藏超出内容 */
            background-color: rgba(0, 0, 0, 0.8); /* 半透明背景 */
            /*display: flex; !* 使用Flexbox布局 *!*/
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
        /* 图片样式 */
        .modal-img-content {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 保持图片比例 */
        }
        /* 关闭按钮样式 */
        .modal-img-close {
            position: absolute; /* 绝对定位 */
            top: 15px; /* 顶部边距 */
            right: 35px; /* 右侧边距 */
            color: #fff; /* 白色 */
            font-size: 40px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            transition: 0.3s; /* 过渡效果 */
            cursor: pointer; /* 光标变为手形 */
        }
        .modal-img-close:hover,
        .modal-img-close:focus {
            color: #bbb; /* 悬停时颜色 */
            text-decoration: none; /* 无下划线 */
        }
    </style>
</head>
<body>
<img src="111.png" alt="Sample Image 1">
<img src="222.png" alt="Sample Image 2">
<img src="333.png" alt="Sample Image 3">

<!-- 模态窗口结构 -->
<div id="imgModal" class="modal-img">
    <span class="modal-img-close">&times;</span>
    <img class="modal-img-content" id="modalImgDisplay">
</div>

<script>
    $(document).ready(function() {
        // 点击图片，显示模态窗口
        $('img').click(function() {
            $('#imgModal').css('display', 'flex');
            $('#modalImgDisplay').attr('src', this.src);
        });

        // 点击关闭按钮，隐藏模态窗口
        $('.modal-img-close').click(function() {
            $('#imgModal').css('display', 'none');
        });

        // 点击模态窗口的背景，隐藏模态窗口
        $('#imgModal').click(function(event) {
            if (event.target.id === 'imgModal') {
                $(this).css('display', 'none');
            }
        });
    });
</script>
</body>
</html>