Javascript实现关闭广告效果


Posted in Javascript onJanuary 29, 2021

用Javascript实现关闭广告案例,供大家参考,具体内容如下

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教。

我们在网页中经常可以看见烦人的小广告,并且广告的旁边通常会有一个特定的位置和图标来关闭这个广告图。下面用JS代码来简单的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      border: 0;
    }
    .gg{
      width: 100%;
      height: 300px;
      background-image: url("../images/JD.png");
    }
    .img{
      width: 20px;
      height: 20px;
      float: right;
    }
  </style>
</head>
<body>
<div class="gg">
  <img class="img" src="../images/2.jpg" title="关闭">
</div>
<script>
  var gg=document.querySelector('.gg')
  var mg=document.querySelector('img')
  mg.onclick=function () {
    gg.style.display='none'
  }
</script>
</body>
</html>

代码解释

这里的原理非常简单,就是在div的底层放了一张烦人的广告图片,然后我放了一个代表着关闭的小图标上去,并放置在小广告的右上角,然后获取事件,onclick时,便触发函数,函数的内容就是让这个大的div盒子直接隐藏不显示,这样就达到了关闭广告的目的。

演示效果

注意右上角

Javascript实现关闭广告效果

点击了设置的位置过后

Javascript实现关闭广告效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Nodejs之http的表单提交
2017/07/07 NodeJs
原生JS实现自定义滚动条效果
2020/10/27 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Python求导数的方法
2015/05/09 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python定义一个Actor任务
2020/07/29 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
企业消防安全制度
2014/02/02 职场文书
普通党员对照检查材料
2014/09/24 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏