Javascript實(shí)現(xiàn)關(guān)閉廣告效果
用Javascript實(shí)現(xiàn)關(guān)閉廣告案例，供大家參考，具體內(nèi)容如下
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教。
我們?cè)诰W(wǎng)頁(yè)中經(jīng)常可以看見煩人的小廣告，并且廣告的旁邊通常會(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 src='http://www.aoyou183.cn/images/2.jpg'></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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟2. JS sort方法基于數(shù)組對(duì)象屬性值排序3. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……4. JAVA上加密算法的實(shí)現(xiàn)用例5. Django-migrate報(bào)錯(cuò)問(wèn)題解決方案6. ajax請(qǐng)求添加自定義header參數(shù)代碼7. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)8. 使用Python和百度語(yǔ)音識(shí)別生成視頻字幕的實(shí)現(xiàn)9. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式10. 基于javascript處理二進(jìn)制圖片流過(guò)程詳解
網(wǎng)公網(wǎng)安備