JS实现关闭图片窗口
JS 实现 图片 关闭 窗口
2023-09-14 09:05:15 时间
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>
相关文章
- 一款纯HTML+CSS+JS富文本编辑器-handyeditor
- JS进度条顺滑版实现
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多线程(上)
- 批量自动取消抖音所有关注 利用JS代码解放双手
- JS实现密码加密
- [Node.js] Use Realm Object Database with Node.js
- [Node.js] Level 1 new. Intro the Node.js
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- 单线程的Node.js是如何实现高并发的
- js es6 标签模板还原字符串
- js实现:仿京东搜索栏随滑动透明度渐变
- Atitit. 获取cpu占有率的 java c# .net php node.js的实现
- Atitit。Tree文件解析器的原理流程与设计实现 java c# php js
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
- 前端js实现打印(导出)excel表格
- vue.js学习:慕课网教程1:vue2.5入门
- Ios开发之 -- js和ios的交互
- 前端js 实现文件下载
- 前端常见算法的JS实现
- js 为Array实现一个Reader,通过接口getReader获取,Reader 有一个接口 read(n)
- leetcode 70. 爬楼梯 js实现
- js 实现 LFU 算法
- leetcode 1019. 链表中的下一个更大节点 js实现
- java+js实现完整的图片展示本地目录demo
- 利用JS实现图片的缓存
- js删除局部变量的实现方法
- js实现返回页面顶部