遮罩层的方式实现点击图片放大

最新推荐文章于 2024-10-13 20:55:11 发布

无烟客来了

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量870

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_41794004/article/details/108621619

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个简单demo，需要的取走就是了，我自己也是留个存档，下次遇到同样的需求copy就完事了。

<!doctype html>
<html>
    <head>
        <!-- 声明当前页面的编码集：charset=gbk,gb2312(中文编码) , utf-8(国际编码) -->
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <!-- 声明当前页面的三元素 -->
        <title>helloWorld--zxk</title>
        <meta name='keywords' content='关键词,关键词'>
        <meta name='description' content=''>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    </head>
    <style type="text/css">
        /* 放大图片的盒子样式 */
        #pop-box {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100vh;
            justify-content: center;
            align-items: center;
            display: none;
            z-index: 10;
            background-color: white;
        }
    </style>
    <body>
        <!-- 需要点击放大的图片 -->
        <img src="img/back.png" onclick="openImg(this.src)">

        <!-- 放大之后的图片 -->
        <div id="pop-box" onclick="openImg(this.src)">
            <img id="pop-img" src="">
        </div>
    </body>

    <script>
        // 放大图片的方法
        function openImg(e) {
            document.getElementById("pop-img").src = e;
            var targit = document.getElementById("pop-box");
            if (targit.style.display == "none" || targit.style.display == "") {
                targit.style.display = "flex";
            } else {
                targit.style.display = "none";
            }
        }
    </script>
</html>