用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实现关闭广告案例相关推荐

html广告倒计时代码,javascript实现倒计时关闭广告
用Javascript实现倒计时关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广 ...
案例：5秒后关闭广告定时器
案例:5秒后关闭广告五秒之后,div盒子隐藏动图展示: 代码展示: <p>案例:5秒后关闭广告</p> <div class="ad">广告 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容
最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...
radio切换控制div显示_JavaScript连载31图片动态切换以及关闭图片案例
一.图标切换 31.1 点击那两个按钮可以做到轮番显示图片二.关闭图片案例 31.2 点击右上角的叉,图片会消失. 三.源码: D31_iconSwitch.html D31_2_CloseImag ...
在Dynamis CRM中打造一键保存关闭刷新案例的功能
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复172或者20151114可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 我们知道在Dynamics CR ...
HTML+CSS+JavaScript实现网页广告
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
JS网站右下角悬浮视窗可关闭广告
效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...
精灵图和窗口右侧广告案例
分享一下自学后完成的一个小案例,预览图如下: 这里注意右侧广告具备两个功能:(1)跟随当前窗口移动 (2)点击右上角叉按钮可以关闭广告代码如下: Temp.html <!DOCTYPE htm ...

用Javascript实现关闭广告案例

用Javascript实现关闭广告案例

代码解释

用Javascript实现关闭广告案例相关推荐

最新文章

热门文章