【JavaScript×CSS】×ボタン押したら広告を削除する方法～画像代用も可～

中山テック 代表の中山です。

先日のブログでは、ページ開いて200pxスクロールすると画面最下に固定バナーを表示・追従させました。

今回は「固定バナーを消せるようにする」「消すためのアイコン(または×ボタン)を実装」「消す際に画像を変える」機能をご紹介いたします。

早速、やっていきましょう！

※先日のブログから肉付けしているので試す時は応用効かせてやってみてください

<div id="koukoku-fixed-sp2" class="sp"></div>

• JavaScript&CSS関連記事(記事はまだまだ続きます)

  #koukoku-fixed-sp2 {
    color:white;
    left: 0;
    width: 100%;
    height: 92px;
    position: fixed;
    display: block;
    z-index: 998;
    background-color:black;
    text-align:center;
  }
  #koukoku-fixed-sp2.upGame2{
    animation: upGameMove2 1s forwards;
  }
  @keyframes upGameMove2{
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      bottom:0;
    }
  }

  #koukoku-fixed-sp2.downGame2 {　⇒①
    animation: downGameMove2 6s forwards;
  }
  @keyframes downGameMove2{　⇒②
    from {
      opacity: 1;
      bottom:0;
    }
    to {
      opacity: 0;
      transform: translateY(100px);
    }
  }

画像配置

const tojiruyo = '<img style="position:fixed;left:0px;top:-60px;z-index:999;width:208px;height:75px;" src="https://nakayama-tech.com/wp-content/uploads/2023/10/saihai3.png" onclick="gameGazouSashikae(),koukokuClose()">';　⇒①

const tojirunkai = '<img style="position:fixed;left:0px;top:-60px;z-index:999;width:324px;height:95px;" src="https://nakayama-tech.com/wp-content/uploads/2023/10/tojirunkai.png">';

rand = Math.floor(Math.random() * gameAdsArrayFooter.length);
document.getElementById("koukoku-fixed-sp2").insertAdjacentHTML('afterbegin', tojiruyo);　⇒②
document.getElementById("koukoku-fixed-sp2").insertAdjacentHTML('beforeend', gameAdsArrayFooter[rand]);

//画像差し替えSP
function gameGazouSashikae() {　⇒③
    let bottomKoukokuList = document.getElementById('koukoku-fixed-sp2');
    bottomKoukokuList.querySelector('img').remove();
    bottomKoukokuList.insertAdjacentHTML('afterbegin', tojirunkai);
}

//広告削除(SP)
function koukokuClose() {　⇒④
    $('#koukoku-fixed-sp2').addClass('downGame2');
}