• 图片


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
            <style>
                    #myImg {
                        border-radius: 5px;
                        cursor: pointer;
                        transition: 0.3s;
                    }
                    
                    #myImg:hover {opacity: 0.7;}
                    
                    /* The Modal (background) */
                    .modal {
                        display: none; /* Hidden by default */
                        position: fixed; /* Stay in place */
                        z-index: 1; /* Sit on top */
                        padding-top: 100px; /* Location of the box */
                        left: 0;
                        top: 0;
                        width: 100%; /* Full width */
                        height: 100%; /* Full height */
                        overflow: auto; /* Enable scroll if needed */
                        background-color: rgb(0,0,0); /* Fallback color */
                        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
                    }
                    
                    /* Modal Content (image) */
                    .modal-content {
                        margin: auto;
                        display: block;
                        width: 80%;
                        max-width: 700px;
                    }
                    
                    /* Caption of Modal Image */
                    #caption {
                        margin: auto;
                        display: block;
                        width: 80%;
                        max-width: 700px;
                        text-align: center;
                        color: #ccc;
                        padding: 10px 0;
                        height: 150px;
                    }
                    
                    /* Add Animation */
                    .modal-content, #caption {    
                        -webkit-animation-name: zoom;
                        -webkit-animation-duration: 0.6s;
                        animation-name: zoom;
                        animation-duration: 0.6s;
                    }
                    
                    @-webkit-keyframes zoom {
                        from {-webkit-transform: scale(0)} 
                        to {-webkit-transform: scale(1)}
                    }
                    
                    @keyframes zoom {
                        from {transform: scale(0.1)} 
                        to {transform: scale(1)}
                    }
                    
                    /* The Close Button */
                    .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;
                    }
                    
                    /* 100% Image Width on Smaller Screens */
                    @media only screen and (max- 700px){
                        .modal-content {
                            width: 100%;
                        }
                    }
                    </style>
                    </head>
                    <body>
                    
                    <h2>图片模态框</h2>
                    <p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
                    首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
                    <p>然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示:</p>
                    <img id="myImg" src="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
                    
                    <!-- The Modal -->
                    <div id="myModal" class="modal">
                      <span class="close">×</span>
                      <img class="modal-content" id="img01">
                      <div id="caption"></div>
                    </div>
                    
                    <script>
                    // 获取模态窗口
                    var modal = document.getElementById('myModal');
                    
                    // 获取图片模态框,alt 属性作为图片弹出中文本描述
                    var img = document.getElementById('myImg');
                    var modalImg = document.getElementById("img01");
                    var captionText = document.getElementById("caption");
                    img.onclick = function(){
                        modal.style.display = "block";
                        modalImg.src = this.src;
                        modalImg.alt = this.alt;
                        captionText.innerHTML = this.alt;
                    }
                    
                    // 获取 <span> 元素,设置关闭模态框按钮
                    var span = document.getElementsByClassName("close")[0];
                    
                    // 点击 <span> 元素上的 (x), 关闭模态框
                    span.onclick = function() { 
                        modal.style.display = "none";
                    }
                    </script>
    </body>
    </html>
    <!-- 
    filter: blur(5px);给图像设置高斯模糊
    filter: brightness(0.4);给图片应用一种线性乘法,使其看起来更亮或更暗
    filter: contrast(200%);调整图像的对比度
    filter: drop-shadow(16px 16px 20px blue);给图像设置一个阴影效果
    filter: grayscale(50%);给图像设置高斯模糊
    filter: hue-rotate(90deg);给图像应用色相旋转
    filter: invert(75%);反转输入图像
    filter: opacity(25%);
    filter: saturate(30%);转换图像饱和度。
    filter: sepia(60%);将图像转换为深褐色
     -->
  • 相关阅读:
    iOS 地图与定位开发系列教程(一)
    opencv 之 transformation
    the brain 8.0
    vs中添加库文件WinMM.Lib
    JAVA简单性能检测
    【转帖】一套鼠标控制2台电脑
    Synergy工具一套键盘鼠标连接多台机器
    文件夹下所有文件及子文件夹将文件名小写
    捕捉Facebook Like的数据
    按键精灵的网页自动化测试
  • 原文地址:https://www.cnblogs.com/wxy0715/p/12442203.html
Copyright © 2020-2023  润新知