JS实现关闭图片窗口
有趣的小案例池子：
[JS实现定时器
](https://blog.csdn.net/qq_51447496/article/details/128194097) [JS实现关闭图片窗口
](https://blog.csdn.net/qq_51447496/article/details/128195955) [JS实现输入检验
](https://blog.csdn.net/qq_51447496/article/details/128195986) [获取焦点后隐藏提示内容的输入框
](https://blog.csdn.net/qq_51447496/article/details/128196035) [JS实现获取鼠标在画布中的位置
](https://blog.csdn.net/qq_51447496/article/details/128196074) [聊天信息框显示消息
](https://blog.csdn.net/qq_51447496/article/details/128196084)[JS点击切换背景图
](https://blog.csdn.net/qq_51447496/article/details/128200492)[自动切换背景的登录页面
](https://blog.csdn.net/qq_51447496/article/details/128201097)[JS制作跟随鼠标移动的图片
](https://blog.csdn.net/qq_51447496/article/details/128203667)[JS实现记住用户密码
](https://blog.csdn.net/qq_51447496/article/details/128204558)
结果演示
概述
通过事件的绑定来实现，关闭网页中某个图片窗口的效果。
构建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>
