欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2021年01月29日 10:29:49   作者：愛前端的茂茂  
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

我們?cè)诰W(wǎng)頁中經(jīng)?？梢钥匆姛┤说男V告，并且廣告的旁邊通常會(huì)有一個(gè)特定的位置和圖標(biāo)來關(guān)閉這個(gè)廣告圖。下面用JS代碼來簡(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è)置的位置過后

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

相關(guān)文章

最新評(píng)論