Javascript实现关闭广告效果
更新时间：2021年01月29日 10:29:49 作者：爱前端的茂茂
这篇文章主要为大家详细介绍了Javascript实现关闭广告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用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盒子直接隐藏不显示，这样就达到了关闭广告的目的。
演示效果
注意右上角
点击了设置的位置过后
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下2023-06-06
今天小编就为大家分享一篇JS判断字符串是否为整数的方法--简单的正则判断，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了js实现敏感词过滤算法及实现逻辑，文中介绍了dfa算法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
本文主要介绍了JS中splice添加或删除数组元素,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
方便做一些问题提交等宣传效果，多用于文字滚动2008-10-10
下面小编就为大家带来一篇浅谈JavaScript中数组的增删改查。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了微信小程序云开发之使用云函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了javascript格式化json显示,实例分析了javascript操作json格式化的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript中BOM对象原理与用法,,结合实例形式分析了javascript中BOM浏览器对象模型相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了js实现可多次定时的倒计时小实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论