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

Javascript實現(xiàn)關閉廣告效果

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

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

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

我們在網(wǎng)頁中經(jīng)?？梢钥匆姛┤说男V告，并且廣告的旁邊通常會有一個特定的位置和圖標來關閉這個廣告圖。下面用JS代碼來簡單的實現(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="關閉">
</div>
<script>
  var gg=document.querySelector('.gg')
  var mg=document.querySelector('img')
  mg.onclick=function () {
    gg.style.display='none'
  }
</script>
</body>
</html>

代碼解釋

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

演示效果

注意右上角

點擊了設置的位置過后

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論