JS仿淘宝关闭二维码案例

点击关闭按钮可以实现二维码的关闭功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.f1 {width: 500px;height: 500px;margin: 0 auto;margin-top: 20px;position: relative;}button {width: 50px;height: 50px;position: absolute;top: 0px;left: 0px;background-color: white;border: 1px solid grey;border-right: 0px}button img {width: 100%;}.er {position: absolute;top: 0px;left: 50px;border: 1px solid rgb(94, 86, 86)}.er p {text-align: center;font-size: 20px;color: orange}</style>
</head><body><!-- 按钮+手机淘宝背景div盒子 --><div class="f1"> <button id="btn"><img src="关闭.png" alt=""></button><div class="er"><p>手机淘宝</p><img src="二维码.png" alt=""></div></div><script>var btn = document.querySelector('#btn')var di = document.querySelector('.f1')var p = document.querySelector('p')//注册事件  事件管理程序btn.onclick = function() {di.style.visibility = 'hidden'}</script>
</body></html>

分析：

1、利用样式的显示和隐藏完成，display：none隐藏元素；display：block显示元素

2、点击按钮，就让这个二维码盒子隐藏起来

先用一个大盒子，里面装两个小盒子，利用定位确定位置，点击关闭，总的大盒子关闭

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box">淘宝二维码<img src="二维码.png" alt=""><i class="close-btn">x</i></div><script>//获取元素var btn = document.querySelector('.close-btn')var div = document.querySelector('.box')btn.onclick = function() {div.style.display = 'none'}</script>
</body></html>

没有进行样式修改，大致思路是一样的

JS仿淘宝关闭二维码案例相关推荐

前端案例——2.仿淘宝关闭二维码案例
  <! ...
仿淘宝关闭二维码案例
要求 : 当鼠标点击二维码关闭按钮的时候 , 则关闭整个二维码 . 案例分析: 核心思路 : 利用样式的显示和隐藏完成 , display:none隐藏元素 , display:block显示元素 . ...
js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
DOM ------ 仿淘宝关闭二维码
仿淘宝关闭二维码完成效果如下: //css代码.box{position: relative;width: 74px;height: 88px;border: 1px solid #ccc;marg ...
Dom——仿淘宝关闭二维码
仿淘宝关闭二维码效果整体的样式如上图所示.(素材图片可去淘宝保存图片) 当点击二维码广告旁边的叉叉,则会把广告关闭. 核心思路点击叉叉,关闭整个广告,则需要的事件源有叉叉符号,整个广告盒子:事件 ...
防淘宝关闭二维码案例
代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
[淘宝客技术篇006]如何登录阿里妈妈-《登录淘宝网·二维码实现法》（下）
<登录淘宝网·二维码实现法> 如下图所示,详解各步骤: 1.用户请求登录: 2.请求获取二维码.请求地址:https://qrlogin.taobao.com/qrcodelogin/ge ...
Web APls 阶段——第四节——案例:关闭淘宝二维码案例
淘宝点击关闭二维码需求:点击关闭之后,淘宝二维码关闭分析: ①:点击的是关闭按钮 ②:关闭的是父盒子核心:利用样式的显示和隐藏完成, display:none 隐藏元素 display:bloc ...
js实战案例--点击关闭二维码
js实战案例–点击关闭二维码要求:当鼠标点击二维码关闭按钮时,则关闭整个二维码如

JS仿淘宝关闭二维码案例

JS仿淘宝关闭二维码案例相关推荐

最新文章

热门文章