用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盒子直接隐藏不显示,这样就达到了关闭广告的目的。
演示效果
注意右上角
点击了设置的位置过后
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
最近在学习jQuery时接触到了show()、hide()、toggle()函数,于是利用这几个函数...
一个常见的场景,获取:标签背景图片链接: 如字符串:var bgImg = "url (\" htt...
需要注意的是,调用的封装的数据库,和jQuery的保存地址 一、注册 (1)写文本框...
详解Spring Controller autowired Request变量 spring的DI大家比较熟悉了,对于...
git clone支持https和git(即ssh)两种方式下载源码: 当使用git方式下载时,如...
大家好我是爱景甜的网工我是一个思科出身专注于华为的网工 好了话不多说进入正题...
1 概述 在接下来的时间里,将会入手ASP.NET MVC这一专题,尽量用最快的时间,最...
在新的MySQL 8.0.23中,引入了新的有趣功能:不可见列。 这是第一篇关于这个新功...
在Asp.net Core之前所有的Action返回值都是ActionResult,Json(),File()等方法返...
多年以后,面对台下五彩斑斓的Jetbrain和Vscode用户,这位曾经的资深的vim追随者...