JS实现关闭图片窗口

极客李华

已于 2024-01-12 19:07:08 修改

阅读量1.6k

点赞数 1

分类专栏： JS学习之旅文章标签： css javascript 前端

于 2022-12-06 01:12:49 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128195955

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

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>