JS实现关闭图片窗口

有趣的小案例池子：
JS实现定时器
JS实现关闭图片窗口
JS实现输入检验
获取焦点后隐藏提示内容的输入框
JS实现获取鼠标在画布中的位置
聊天信息框显示消息
JS点击切换背景图
自动切换背景的登录页面
JS制作跟随鼠标移动的图片
JS实现记住用户密码

结果演示

在这里插入图片描述

概述

通过事件的绑定来实现，关闭网页中某个图片窗口的效果。

构建HTML框架

<body>
    <div class="box">
        图片
        <img src="https://upload-bbs.mihoyo.com/upload/2021/03/11/73281682/f810fbc2e4806aab8176e96feee0078e_5530265271028193466.jpg" alt="">
        <i class="close-btn">×</i>
    </div>
</body>

CSS样式

<style>
        .box {
            /* 设置相对定位 */
            position: relative;
            /* 设置盒子的宽高 */
            width: 74px;
            height: 88px;
            /* 设置边框的样式 */
            border: 1px solid #ccc;
            /* 设置距离上方100px 左右居中 */
            margin: 100px auto;
            /* 设置字体大小为12px */
            font-size: 12px;
            /* 设置文本排列居中 */
            text-align: center;
            
            /* 设置颜色为橙色 */
            color: #f40;            
        }
        
        .box img {
            /* 设置图片的宽度 */
            width: 60px;
            height: 60px;
            /* 设置图片的上方外边距 */
            margin-top: 5px;
        }
        
        .close-btn {
            /* 设置绝对定位 */
            position: absolute;
            /* 确定内容的位置 */
            top: -1px;
            left: -16px;

            /* 确定内容的大小 */
            width: 14px;
            height: 14px;
            /* 设置边框的颜色和样式 */
            border: 1px solid #ccc;
            /* 设置行高 */
            line-height: 14px;
            /* 设置字体样式 */
            font-family: Arial, Helvetica, sans-serif;
            /* 设置鼠标悬浮在上面的时候的样式 */
            cursor: pointer;
        }
    </style>

JS逻辑

<script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            // 设置display为none 也就是不再显示二维码
            box.style.display = 'none';
        }
    </script>

完整代码

<!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>
    <style>
        .box {
            /* 设置相对定位 */
            position: relative;
            /* 设置盒子的宽高 */
            width: 74px;
            height: 88px;
            /* 设置边框的样式 */
            border: 1px solid #ccc;
            /* 设置距离上方100px 左右居中 */
            margin: 100px auto;
            /* 设置字体大小为12px */
            font-size: 12px;
            /* 设置文本排列居中 */
            text-align: center;
            
            /* 设置颜色为橙色 */
            color: #f40;            
        }
        
        .box img {
            /* 设置图片的宽度 */
            width: 60px;
            height: 60px;
            /* 设置图片的上方外边距 */
            margin-top: 5px;
        }
        
        .close-btn {
            /* 设置绝对定位 */
            position: absolute;
            /* 确定内容的位置 */
            top: -1px;
            left: -16px;

            /* 确定内容的大小 */
            width: 14px;
            height: 14px;
            /* 设置边框的颜色和样式 */
            border: 1px solid #ccc;
            /* 设置行高 */
            line-height: 14px;
            /* 设置字体样式 */
            font-family: Arial, Helvetica, sans-serif;
            /* 设置鼠标悬浮在上面的时候的样式 */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        图片
        <img src="https://upload-bbs.mihoyo.com/upload/2021/03/11/73281682/f810fbc2e4806aab8176e96feee0078e_5530265271028193466.jpg" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            // 设置display为none 也就是不再显示二维码
            box.style.display = 'none';
        }
    </script>
</body>

</html>