• 售前

  • 售后

热门帖子
入门百科

Javascript实现关闭广告结果

[复制链接]
钟情695 显示全部楼层 发表于 2021-10-25 19:50:20 |阅读模式 打印 上一主题 下一主题
用Javascript实现关闭广告案例,供各人参考,具体内容如下
正在学习大前端中,有代码和思绪不规范不准确的地方往多多包容,感谢指教。
我们在网页中经常可以瞥见烦人的小广告,而且广告的旁边通常会有一个特定的位置和图标来关闭这个广告图。下面用JS代码来简单的实现
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     *{
  8.       padding: 0;
  9.       margin: 0;
  10.       border: 0;
  11.     }
  12.     .gg{
  13.       width: 100%;
  14.       height: 300px;
  15.       background-image: url("../images/JD.png");
  16.     }
  17.     .img{
  18.       width: 20px;
  19.       height: 20px;
  20.       float: right;
  21.     }
  22.   </style>
  23. </head>
  24. <body>
  25. <div class="gg">
  26.   <img class="img" src="../images/2.jpg" title="关闭">
  27. </div>
  28. <script>
  29.   var gg=document.querySelector('.gg')
  30.   var mg=document.querySelector('img')
  31.   mg.onclick=function () {
  32.     gg.style.display='none'
  33.   }
  34. </script>
  35. </body>
  36. </html>
复制代码
代码表明
这里的原理非常简单,就是在div的底层放了一张烦人的广告图片,然后我放了一个代表着关闭的小图标上去,并放置在小广告的右上角,然后获取变乱,onclick时,便触发函数,函数的内容就是让这个大的div盒子直接隐藏不体现,如许就到达了关闭广告的目的。
演示效果
留意右上角

点击了设置的位置过后

以上就是本文的全部内容,盼望对各人的学习有所帮助,也盼望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作