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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 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
2021年最新CPU天梯图
2021/03/04 数码科技
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python字符串排序方法
2014/08/29 Python
Python的面向对象思想分析
2015/01/14 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python正则捕获操作示例
2017/08/19 Python
Python探索之ModelForm代码详解
2017/10/26 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python3实现逐字输出的方法
2019/01/23 Python
PyQt5响应回车事件的方法
2019/06/25 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
企业管理培训感言
2014/01/27 职场文书
党支部承诺书范文
2014/03/28 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
合作协议书模板
2014/10/10 职场文书