JS实现关闭图片窗口

2025-07-26 08:59:54

JS实现关闭图片窗口 JS实现关闭图片窗口有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换背景图自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码结果演示概述通过事件的绑定来实现，关闭网页中某个图片窗口的效果。构建HTML框架代码语言：jav

JS实现关闭图片窗口

有趣的小案例池子：

JS实现定时器

JS实现关闭图片窗口

JS实现输入检验

获取焦点后隐藏提示内容的输入框

JS实现获取鼠标在画布中的位置

聊天信息框显示消息

JS点击切换背景图

自动切换背景的登录页面

JS制作跟随鼠标移动的图片

JS实现记住用户密码

结果演示

概述

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

构建HTML框架

代码语言：javascript代码运行次数：0运行复制

<body>
    <div class="box">
        图片
        <img src=".jpg" alt="">
        <i class="close-btn">×</i>
    </div>
</body>

CSS样式

代码语言：javascript代码运行次数：0运行复制

<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逻辑

代码语言：javascript代码运行次数：0运行复制

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

完整代码

代码语言：javascript代码运行次数：0运行复制

<!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=".jpg" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
         = function() {
            // 设置display为none 也就是不再显示二维码
            box.style.display = 'none';
        }
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2024-01-12，如有侵权请联系 cloudcommunity@tencent 删除框架事件登录定时器二维码

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1151099.html

本站网友火龙果的营养成分	15分钟前发表
14px; /* 设置字体样式 */ font-family
本站网友鼻窦炎症状	16分钟前发表
relative; /* 设置盒子的宽高 */ width
本站网友 robomasters	5分钟前发表
88px; /* 设置边框的样式 */ border
本站网友多头市场	13分钟前发表
relative; /* 设置盒子的宽高 */ width
本站网友抽打阴蒂	20分钟前发表
-1px; left
本站网友苹果社区房价	10分钟前发表
initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { /* 设置相对定位 */ position
本站网友蓟门桥二手房	28分钟前发表
原始发表：2024-01-12
本站网友全能营销	16分钟前发表
88px; /* 设置边框的样式 */ border

JS实现关闭图片窗口