图片静态框（放大）

最新推荐文章于 2023-10-22 17:10:53 发布

卢晶晶

最新推荐文章于 2023-10-22 17:10:53 发布

阅读量383

点赞数 1

分类专栏： CSS HTML Web前端

本文链接：https://blog.youkuaiyun.com/Lucrecia666/article/details/84765913

版权

Web前端同时被 3 个专栏收录

14 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

HTML

5 篇文章

订阅专栏

图片静态框（放大）

说明：

点击后图片逐渐放大，，点击x按钮大图片消失。

代码：

<html>

<head>
    <meta charset="utf-8">
    <style>
        #imgid {
            width: 300px;
            opacity: 1;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.5s;
        }
        
        #imgid:hover {
            opacity: 0.7;
        }
        
        #my_model {
            display: none;
            width: 100%;
            z-index: 1;
            position: fixed;
            height: 100%;
            margin: 0px;
            padding: 0px;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.6);
            animation: zoom 1s;
        }
        
        @-webkit-keyframes zoom {
            from {
                -webkit-transform: scale(0)
            }
            to {
                -webkit-transform: scale(1)
            }
        }
        
        @keyframes zoom {
            from {
                -webkit-transform: scale(0)
            }
            to {
                -webkit-transform: scale(1)
            }
        }
        
        #img1 {
            margin: auto;
            display: block;
        }
        
        #caption {
            margin: auto;
            display: block;
            height: 50px;
            text-align: center;
        }
        
        #img1,
        #caption {
            display: none;
            width: 90%;
            text-align: center;
            transition: 0.6s;
        }
        
        #close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        
        #close:hover,
        #close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h2>《鬼刀》</h2>
    <p>《鬼刀》是国内原创绘本漫画，现连载于知名漫画网站有妖气。<br> 故事内容很久很久以前，诺拉大陆上，为了表示对诺拉女神最崇高的敬意，虔诚的人类筑起了一座宏伟的高塔。</p>
    <img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1543830296170&amp;di=fe0c957f655b17d31dc6a951c3ccd0bc&amp;imgtype=0&amp;src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201807%2F17%2F154505zqzt6fcfcxdqw4cs.jpg" alt="《鬼刀》" id="imgid">
    <div id="my_model">
        <span id="close">x</span>
        <img id="img1">
        <div id="caption"></div>
    </div>

    </div>
</body>
<script>
    var model = document.getElementById("my_model");
    var img = document.getElementById("imgid");
    var modelImg = document.getElementById("img1");
    var captionText = document.getElementById("caption");
    img.onclick = function() {
        model.style.display = "block";
        captionText.style.display = "block";
        modelImg.style.display = "block";
        modelImg.src = this.src;
        modelImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    }
    var span = document.getElementById("close");
    span.onclick = function() {
        model.style.display = "none";
    }
</script>

</html>

效果：