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

avatar 2024年05月22日10:52:09 0 74 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>

 

效果图

效果还不错,对于大部分图片都能正常显示

 

但是对于这种长图,因为设置了高度100%,所以会很小,效果不太好。

尝试过设置高度auto,外层overflow设置auto即加滚动条,会出现顶部一部分无法显示。

暂时放弃,对于大图还是全屏查看吧,或者直接使用浏览器快捷键ctrl+放大

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 编程爱好者交流群
  • 资源分享,问题解决,技术交流。QQ群:424285828(新群)
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0