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 相关文章推荐
jquery 按键盘上的enter事件
May 11 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
JS闭包原理及其使用场景解析
Dec 03 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
取选中的radio的值
2010/01/11 Javascript
优化javascript的执行速度
2010/01/23 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python自动格式化json文件的方法
2015/03/11 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python读取中文txt文本的方法
2018/04/12 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python实现图片批量压缩程序
2018/07/23 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
解决Python中回文数和质数的问题
2019/11/24 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
信息技术教学反思
2014/02/12 职场文书
干部现实表现材料
2014/02/13 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
为自己工作观后感
2015/06/11 职场文书
党员证明信
2015/06/19 职场文书
高温慰问简报
2015/07/21 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技