JavaScript實現(xiàn)廣告彈窗效果
大家都見過某度中的惡意廣告,你關(guān)閉了又出來了!為何,JS來告訴你
HTML
<body> <h3 class="whiteColor">無法關(guān)閉的彈框,打不死的小強!</h3> <div id="middleBox"> <a href="javascript:;" class="close_btn" id="closeBtn"><img src="images/close_icon.png" alt="" class="will_close"></a> <ul class="parent_btn"> <li><a href="/" class="btn_tel"><img src="images/icon_tel.gif" alt=""><span>撥打電話</span></a></li> <li><a href="/" class="btn_chat"><img src="images/icon_chat.gif" alt=""><span>快速留言</span></a></li> </ul> </div> </body>
CSS
*{ margin: 0; padding: 0; list-style: none; outline: none; box-sizing: border-box; text-decoration: none; } a { -webkit-touch-callout: none; text-decoration: none } :focus { outline: 0 } body{ font-family: Helvetica, STHeiTi, "Microsoft YaHei", sans-serif; color: #595757; background-color: #fff; outline: 0; overflow-x: hidden; -webkit-tap-highlight-color:rgba(0,0,0,0); } img{ border: none; } .whiteColor{ color: #fff; text-align: center; } .flex_parent{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex_child{ -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } /*middle_box*/ body{ position: relative; background-color: #272822; } #middleBox{ width: 260px; height: 248px; margin: 0 auto; background-image: url(../images/irfa_dog.jpg); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 10px; /*水平垂直居中*/ position: fixed; left: 50%; top: 50%; margin-top: -124px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; } .close_btn{ display: block; overflow: hidden; position: absolute; top: -10px; right: -10px; } .will_close{ width:32px; } #middleBox a{ overflow: hidden; } #middleBox a img,#middleBox a span,#middleBox ul li{ float: left; } #middleBox a span{ font-size: 16px; color: #fff; } #middleBox ul{ overflow: hidden; } #middleBox ul li{ width: 130px; } #middleBox ul li a{ line-height: 50px; display: block; padding-left: 5px; } #middleBox ul li a img{ width:30px; margin-right: 2px; margin-top: 8px; margin-left: 5px; } .btn_tel{ background-color: #F92665; border-bottom-left-radius: 10px; } .btn_chat{ background-color: #1EA362; border-bottom-right-radius: 10px; } .parent_btn{ position: absolute; left: 0; bottom: 0; }
JS
/** * Created by Administrator on 2016/7/19. */ var adv={ div:null, timer:null, btn:null, init:function(){ this.btn=document.getElementById("closeBtn"); this.div=document.getElementById("middleBox"); this.btn.onclick=this.displayNone; }, displayBlock:function(){ adv.div.style.display="block"; }, displayNone:function(){ adv.div.style.display="none"; timer=setTimeout(function(){ adv.displayBlock(); },3000); } }; window.onload=function(){ adv.init(); };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)簡單MD5加密的腳本分享
MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個128位(16字節(jié))的散列值(hash value),用于確保信息傳輸完整一致。本文將用JavaScript實現(xiàn)簡單MD5加密,感興趣的可以了解一下2022-10-10javascript學(xué)習(xí)筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識,包括函數(shù)聲明式、函數(shù)表達式、Function 構(gòu)造函數(shù)等,十分的簡單實用,有需要的小伙伴可以參考下。2015-06-06JavaScript SHA512&SHA256加密算法詳解
本文給大家分享的是javascript版的SHA512&SHA256加密算法的代碼,以及用法,有需要的小伙伴可以參考下。2015-08-08js 動態(tài)添加標簽(新增一行,其實很簡單,就是幾個函數(shù)的應(yīng)用)
把所有代碼拷下另存為一個html文件,在瀏覽器中打開,點擊“新增一行”按鈕就可以,以下是對js函數(shù)的解釋2009-03-03HTML5基于Tomcat 7.0實現(xiàn)WebSocket連接并實現(xiàn)簡單的實時聊天
WebSocket 是一種自然的全雙工、雙向、單套接字連接。這篇文章給大家介紹了HTML5基于Tomcat 7.0實現(xiàn)WebSocket連接并實現(xiàn)簡單的實時聊天,感興趣的朋友一起學(xué)習(xí)吧2016-10-10微信小程序van-field中的left-icon屬性自定義實現(xiàn)過程
在小程序中,我們是用 Vant 組件庫時,常常會用到 van-field 輸入框控件,今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實現(xiàn),感興趣的朋友一起看看吧2023-08-08原生js實現(xiàn)ajax請求和JSONP跨域請求操作示例
這篇文章主要介紹了原生js實現(xiàn)ajax請求和JSONP跨域請求操作,結(jié)合實例形式分析了基于原生js實現(xiàn)的ajax請求和JSONP跨域請求相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03