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 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 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
小偷PHP+Html+缓存
2006/11/25 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
jQuery 表格工具集
2010/04/25 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python中new方法的详解
2019/01/15 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
上课看小说检讨书
2014/02/22 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
教师节随笔
2015/08/15 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript