js右下角彈出提示框示例代碼
本文實(shí)例講解了網(wǎng)頁(yè)右下角彈出廣告信息框?qū)嵗a,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>網(wǎng)頁(yè)右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none; } #winpop .title{ width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px; } #winpop .con{ width:100%; height:90px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center } #silu{ font-size:12px; color:#666; position:absolute; right:0; text-decoration:underline; line-height:22px; } .close{ position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer } </style> <script type="text/javascript"> function tips_pop(){ var MsgPop=document.getElementById("winpop"); var popH=parseInt(MsgPop.style.height);//將對(duì)象的高度轉(zhuǎn)化為數(shù)字 if(popH==0){ MsgPop.style.display="block";//顯示隱藏的窗口 show=setInterval("changeH('up')",2); } else{ hide=setInterval("changeH('down')",2); } } function changeH(str){ var MsgPop=document.getElementById("winpop"); var popH=parseInt(MsgPop.style.height); if(str=="up"){ if(popH<=100){ MsgPop.style.height=(popH+4).toString()+"px"; } else{ clearInterval(show); } } if(str=="down"){ if(popH>=4){ MsgPop.style.height=(popH-4).toString()+"px"; } else{ clearInterval(hide); MsgPop.style.display="none"; //隱藏DIV } } } window.onload=function(){ var oclose=document.getElementById("close"); var bt=document.getElementById("bt"); document.getElementById('winpop').style.height='0px'; setTimeout("tips_pop()",3000); oclose.onclick=function(){tips_pop()} bt.onclick=function(){tips_pop()} } </script> <body> <div id="silu"> <button id="bt">3秒后會(huì)在右下角自動(dòng)彈出窗口,如果沒(méi)有彈出請(qǐng)點(diǎn)擊這個(gè)按鈕</button> </div> <div id="winpop"> <div class="title">您有新的短消息!<span class="close" id="close">X</span></div> <div class="con">1條未讀信息(</div> </div> </body> </html>
以上代碼實(shí)現(xiàn)了我們需要的功能,下面簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程。
實(shí)現(xiàn)原理:
原理非常的簡(jiǎn)單,下面分步做一下簡(jiǎn)單的介紹:
1.讓窗口居于網(wǎng)頁(yè)的右下角:
實(shí)現(xiàn)代碼如下:
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none; }
以上代碼將windpop元素設(shè)置為絕對(duì)定位,尤其是將它的right和bottom屬性值設(shè)置為0,這樣就保證了它位于網(wǎng)頁(yè)的右下角,同時(shí)也將它的高度設(shè)置為0px,也就是說(shuō)在默認(rèn)狀態(tài)下是隱藏的。
2.如何顯示和隱藏:
通過(guò)定時(shí)器函數(shù)setInterval()每隔指定時(shí)間調(diào)用一次changeH()函數(shù),此函數(shù)可以根據(jù)傳遞的值不斷的設(shè)置windpop的高度,這樣就實(shí)現(xiàn)了此窗口平滑出現(xiàn)和消失的效果。原理大體如上,這里就不多介紹了。
以上就是右下角彈出提示框的實(shí)現(xiàn)代碼,希望對(duì)大家的學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時(shí)會(huì)遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JS操作json對(duì)象key、value的常用方法分析
這篇文章主要介紹了JS操作json對(duì)象key、value的常用方法,結(jié)合實(shí)例形式分析了js操作json對(duì)象鍵值對(duì)遍歷及增刪的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10js對(duì)數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對(duì)數(shù)組中的數(shù)字從小到大排序,很多時(shí)候需要用的多,需要的朋友可以參考下2012-09-09如何通過(guò)Proxy實(shí)現(xiàn)JSBridge模塊化封裝
這篇文章主要介紹了如何通過(guò)Proxy實(shí)現(xiàn)JSBridge模塊化封裝,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10BootStrap實(shí)現(xiàn)手機(jī)端輪播圖左右滑動(dòng)事件
用bootstrap做出的項(xiàng)目輪播圖在手機(jī)端不能滑動(dòng),為此找了好多插件、框架。但是都不能和bootstrap良好的結(jié)合。經(jīng)過(guò)一番折騰終于找到了解決方法,下面小編通過(guò)本文給大家簡(jiǎn)單介紹下2016-10-10微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼,實(shí)現(xiàn)原理就是通過(guò)點(diǎn)擊按鈕,往需要?jiǎng)赢嫷膁iv中添加或移除擁有動(dòng)畫效果的class。具體實(shí)例代碼大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧2018-11-11JavaScript設(shè)計(jì)模式之享元模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01