Javascript實現關閉廣告效果
用Javascript實現關閉廣告案例，供大家參考，具體內容如下
正在學習大前端中，有代碼和思路不規范不正確的地方往多多包涵，感謝指教。
我們在網頁中經?？梢钥匆姛┤说男V告，并且廣告的旁邊通常會有一個特定的位置和圖標來關閉這個廣告圖。下面用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 src='http://www.intensediesel.com/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>
代碼解釋
這里的原理非常簡單，就是在div的底層放了一張煩人的廣告圖片，然后我放了一個代表著關閉的小圖標上去，并放置在小廣告的右上角，然后獲取事件，onclick時，便觸發函數，函數的內容就是讓這個大的div盒子直接隱藏不顯示，這樣就達到了關閉廣告的目的。
演示效果
注意右上角
點擊了設置的位置過后
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. ASP.NET MVC遍歷驗證ModelState的錯誤信息2. 使用EF Code First搭建簡易ASP.NET MVC網站并允許數據庫遷移3. ASP中if語句、select 、while循環的使用方法4. javascript xml xsl取值及數據修改第1/2頁5. HTML5 Canvas繪制圖形從入門到精通6. XML入門的常見問題(一)7. jsp+servlet簡單實現上傳文件功能（保存目錄改進）8. JavaWeb Servlet中url-pattern的使用9. 淺談SpringMVC jsp前臺獲取參數的方式 EL表達式10. asp批量添加修改刪除操作示例代碼
網公網安備