Dom——仿淘宝关闭二维码

仿淘宝关闭二维码

效果

整体的样式如上图所示。（素材图片可去淘宝保存图片）
当点击二维码广告旁边的叉叉，则会把广告关闭。

核心思路

点击叉叉，关闭整个广告，则需要的事件源有叉叉符号，整个广告盒子；事件类型为点击onclick。只要点击事件触发后，整个盒子display:none即可。

HTML与CSS

<div class="box">点击右边叉叉可以关闭我哦<img src="data:image/淘宝二维码.png" alt=""><i class="close-btn">×</i>
</div>

<style>* {margin: 0;padding: 0;border: 0;box-sizing: border-box;}.box {position: relative;width: 100px;height: 130px;margin: 50px auto;padding: 3px 0 0;text-align: center;font-size: 10px;border: 1px solid orange;display: block;}.box img {width: 90px;}.box i {position: absolute;top: -1px;left: -26px;width: 25px;height: 25px;text-align: center;line-height: 25px;border: 1px solid orange;font-size: 25px;font-style: normal;cursor: pointer;}
</style>

JavaScript部分

<script>var i = document.querySelector('.close-btn');var box = document.querySelector('.box');i.onclick = function() {box.style.display = 'none';}
</script>

Dom——仿淘宝关闭二维码相关推荐

DOM ------ 仿淘宝关闭二维码
仿淘宝关闭二维码完成效果如下: //css代码.box{position: relative;width: 74px;height: 88px;border: 1px solid #ccc;marg ...
前端案例——2.仿淘宝关闭二维码案例
  <! ...
js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
JS仿淘宝关闭二维码案例
点击关闭按钮可以实现二维码的关闭功能 <!DOCTYPE html> <html lang="en"><head><meta charse ...
仿淘宝关闭二维码案例
要求 : 当鼠标点击二维码关闭按钮的时候 , 则关闭整个二维码 . 案例分析: 核心思路 : 利用样式的显示和隐藏完成 , display:none隐藏元素 , display:block显示元素 . ...
防淘宝关闭二维码案例
代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
[淘宝客技术篇006]如何登录阿里妈妈-《登录淘宝网·二维码实现法》（下）
<登录淘宝网·二维码实现法> 如下图所示,详解各步骤: 1.用户请求登录: 2.请求获取二维码.请求地址:https://qrlogin.taobao.com/qrcodelogin/ge ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
java计算机毕业设计h5仿淘宝购物系统源码+数据库+系统+lw文档
java计算机毕业设计h5仿淘宝购物系统源码+数据库+系统+lw文档 java计算机毕业设计h5仿淘宝购物系统源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语言:Java语言 ...

Dom——仿淘宝关闭二维码

仿淘宝关闭二维码

效果

核心思路

HTML与CSS

JavaScript部分

Dom——仿淘宝关闭二维码相关推荐

最新文章

热门文章