JavaScript實(shí)現(xiàn)廣告彈窗效果
大家都見(jiàn)過(guò)某度中的惡意廣告,你關(guān)閉了又出來(lái)了!為何,JS來(lái)告訴你
HTML
<body> <h3 class="whiteColor">無(wú)法關(guān)閉的彈框,打不死的小強(qiáng)!</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(); };
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)關(guān)閉小廣告特效
- js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告
- javascript實(shí)現(xiàn)循環(huán)廣告條效果
- 基于JavaScript實(shí)現(xiàn)淘寶商品廣告效果
- 用js屏蔽被http劫持的浮動(dòng)廣告實(shí)現(xiàn)方法
- JS使用cookie實(shí)現(xiàn)只出現(xiàn)一次的廣告代碼效果
- JavaScript實(shí)現(xiàn)彈出廣告功能
- 原生js實(shí)現(xiàn)網(wǎng)頁(yè)頂部自動(dòng)下拉/收縮廣告效果
- JavaScript cookie 跨域訪問(wèn)之廣告推廣
- JS前端廣告攔截實(shí)現(xiàn)原理解析
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密的腳本分享
MD5信息摘要算法是一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值(hash value),用于確保信息傳輸完整一致。本文將用JavaScript實(shí)現(xiàn)簡(jiǎn)單MD5加密,感興趣的可以了解一下2022-10-10javascript學(xué)習(xí)筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識(shí),包括函數(shù)聲明式、函數(shù)表達(dá)式、Function 構(gòu)造函數(shù)等,十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-06-06JavaScript SHA512&SHA256加密算法詳解
本文給大家分享的是javascript版的SHA512&SHA256加密算法的代碼,以及用法,有需要的小伙伴可以參考下。2015-08-08js 動(dòng)態(tài)添加標(biāo)簽(新增一行,其實(shí)很簡(jiǎn)單,就是幾個(gè)函數(shù)的應(yīng)用)
把所有代碼拷下另存為一個(gè)html文件,在瀏覽器中打開(kāi),點(diǎn)擊“新增一行”按鈕就可以,以下是對(duì)js函數(shù)的解釋2009-03-03HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡(jiǎn)單的實(shí)時(shí)聊天
WebSocket 是一種自然的全雙工、雙向、單套接字連接。這篇文章給大家介紹了HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡(jiǎn)單的實(shí)時(shí)聊天,感興趣的朋友一起學(xué)習(xí)吧2016-10-10基于JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Vue
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Vue的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09微信小程序van-field中的left-icon屬性自定義實(shí)現(xiàn)過(guò)程
在小程序中,我們是用 Vant 組件庫(kù)時(shí),常常會(huì)用到 van-field 輸入框控件,今天我將跟大家分享的是 van-field 輸入框控件中的 left-icon 屬性的自定義怎么實(shí)現(xiàn),感興趣的朋友一起看看吧2023-08-08原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作,結(jié)合實(shí)例形式分析了基于原生js實(shí)現(xiàn)的ajax請(qǐng)求和JSONP跨域請(qǐng)求相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03