点击图片实现图片居中放大的功能

tanxin2721

于 2021-01-05 14:13:10 发布

阅读量1w

点赞数 21

分类专栏：前端应用

本文链接：https://blog.csdn.net/tanxin2721/article/details/112228862

版权

前端应用专栏收录该内容

1 篇文章

订阅专栏

如题，我想要点击图片的时候弹出居中显示放大。这个功能也是看别人的实现方法而来的，只是有细微的变化轻松解决点击图片放大问题
下面是我自己仿造他写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击图片放大</title>
    <script src="../base/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .imgPreview {
            display: none;
            top: 0;
            left: 0;
            width: 100%; /*容器占满整个屏幕*/
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, 0.5);
        }

        .imgPreview img {
            z-index: 100;
            width: 60%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /*添加鼠标移入图片效果*/
        .img {
            cursor: url("ico/放大镜.png"), auto;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $('.img').on('click', function () {
                var src = $(this).attr('src');
                $('.imgPreview img').attr('src', src);
                $('.imgPreview').show()
            });
            $('.imgPreview').on('click', function () {
                $('.imgPreview').hide()
            });
        })
    </script>
</head>


<body>
<img src="picture/ec88b5c0c7387bb24c5169fb5d451c3c.jpeg" class="img">

<div class="imgPreview">
    <img src="#" alt="" id="imgPreview">
</div>

</body>

</html>

效果如下
在这里插入图片描述
大致说下原理，点击图片触发单击响应事件，半透明的包含块全屏显示，然后图片进行放大居中显示。
包含块如下：

<div class="imgPreview">
    <img src="#" alt="" id="imgPreview">
</div>

其样式为

        .imgPreview {
            display: none;
            top: 0;
            left: 0;
            width: 100%; /*容器占满整个屏幕*/
            height: 100%;
            position: fixed;
            background: rgba(0, 0, 0, 0.5);
        }

1. 实现包含块全屏显示：开启定位fixed脱离文档流，设置top和left为0（最好top和left都要设置0，我看原作者只设置了top，但我在应用到bootsrap中的时候会出现左边没有覆盖完，必须要设置left也为0），width和height100%使的包含块全屏覆盖，最后设置了半透明度。因为开始设置的隐藏，只有单击图片后才会全屏覆盖显示。

2. 实现图片居中显示：通过jquery将包含块里的src设置成原有的图片src，然后通过设置包含块内的css样式达到居中放大的目的。其中通过设置width的值（百分比是相对于屏幕尺寸）达到放大的目的，通过设置top和left（百分比是相对于屏幕尺寸）进行定位，使得图片左上角在屏幕正中间，然后设置transform：translate（-50%，-50%）相对自身尺寸移动，使得图片中心位置移动到屏幕中心位置。

        .imgPreview img {
            z-index: 100;
            width: 60%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }