Javascript實現關閉廣告效果
阿新 • • 發佈：2021-02-03
用Javascript實現關閉廣告案例，供大家參考，具體內容如下
正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教。
我們在網頁中經常可以看見煩人的小廣告，並且廣告的旁邊通常會有一個特定的位置和圖示來關閉這個廣告圖。下面用JS程式碼來簡單的實現
<!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時，便觸發函式，函式的內容就是讓這個大的div盒子直接隱藏不顯示，這樣就達到了關閉廣告的目的。
演示效果
注意右上角
點選了設定的位置過後
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。