快捷導(dǎo)航

Javascript實(shí)現(xiàn)關(guān)閉廣告效果

更新時(shí)間：2021年01月29日 10:29:49 作者：愛(ài)前端的茂茂

這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用Javascript實(shí)現(xiàn)關(guān)閉廣告案例，供大家參考，具體內(nèi)容如下

正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教。

我們?cè)诰W(wǎng)頁(yè)中經(jīng)?？梢钥匆?jiàn)煩人的小廣告，并且廣告的旁邊通常會(huì)有一個(gè)特定的位置和圖標(biāo)來(lái)關(guān)閉這個(gè)廣告圖。下面用JS代碼來(lái)簡(jiǎn)單的實(shí)現(xiàn)

<!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="關(guān)閉">
</div>
<script>
  var gg=document.querySelector('.gg')
  var mg=document.querySelector('img')
  mg.onclick=function () {
    gg.style.display='none'
  }
</script>
</body>
</html>

代碼解釋

這里的原理非常簡(jiǎn)單，就是在div的底層放了一張煩人的廣告圖片，然后我放了一個(gè)代表著關(guān)閉的小圖標(biāo)上去，并放置在小廣告的右上角，然后獲取事件，onclick時(shí)，便觸發(fā)函數(shù)，函數(shù)的內(nèi)容就是讓這個(gè)大的div盒子直接隱藏不顯示，這樣就達(dá)到了關(guān)閉廣告的目的。

演示效果

注意右上角

點(diǎn)擊了設(shè)置的位置過(guò)后

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串
CSV文件一般是以逗號(hào)為分隔值的文件(Comma-Separated?Values,CSV,有時(shí)也稱為字符分隔值,因?yàn)榉指糇址部梢圆皇嵌禾?hào)),其文件以純文本形式存儲(chǔ)表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下
2023-06-06
JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷
今天小編就為大家分享一篇JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
js實(shí)現(xiàn)敏感詞過(guò)濾算法及實(shí)現(xiàn)邏輯
這篇文章主要介紹了js實(shí)現(xiàn)敏感詞過(guò)濾算法及實(shí)現(xiàn)邏輯，文中介紹了dfa算法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
JS中splice添加或刪除數(shù)組元素
本文主要介紹了JS中splice添加或刪除數(shù)組元素,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)
方便做一些問(wèn)題提交等宣傳效果，多用于文字滾動(dòng)
2008-10-10
淺談JavaScript中數(shù)組的增刪改查
下面小編就為大家?guī)?lái)一篇淺談JavaScript中數(shù)組的增刪改查。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
微信小程序云開(kāi)發(fā)之使用云函數(shù)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)之使用云函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
javascript格式化json顯示實(shí)例分析
這篇文章主要介紹了javascript格式化json顯示,實(shí)例分析了javascript操作json格式化的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JavaScript中BOM對(duì)象原理與用法分析
這篇文章主要介紹了JavaScript中BOM對(duì)象原理與用法,,結(jié)合實(shí)例形式分析了javascript中BOM瀏覽器對(duì)象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-07-07
js倒計(jì)時(shí)小實(shí)例（多次定時(shí)）
這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12