本文實(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
