網頁右下角彈出廣告信息框實例代碼:右下角彈出視窗效果是常見的彈出視窗效果之一，比如可以作為廣告視窗，也可以作為網站的一些公告或者通知，非常的實用，下麵就通過實例簡單介紹一下如何實現此功能，代碼如下:網頁右下角的信息框-螞蟻部落 3秒後會在右下角自動彈出視窗，如果沒有彈出請點擊這個按鈕 您有新的短.....
網頁右下角彈出廣告信息框實例代碼:
右下角彈出視窗效果是常見的彈出視窗效果之一，比如可以作為廣告視窗，也可以作為網站的一些公告或者通知，非常的實用，下麵就通過實例簡單介紹一下如何實現此功能，代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>網頁右下角的信息框-螞蟻部落</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);//將對象的高度轉化為數字 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秒後會在右下角自動彈出視窗，如果沒有彈出請點擊這個按鈕</button> </div> <div id="winpop"> <div class="title">您有新的短消息！<span class="close" id="close">X</span></div> <div class="con">1條未讀信息(</div> </div> </body> </html>
以上代碼實現了我們需要的功能，下麵簡單介紹一下實現過程。
一.實現原理:
原理非常的簡單，下麵分步做一下簡單的介紹:
1.讓視窗居於網頁的右下角:
實現代碼如下:
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none; }
以上代碼將windpop元素設置為絕對定位，尤其是將它的right和bottom屬性值設置為0，這樣就保證了它位於網頁的右下角，同時也將它的高度設置為0px，也就是說在預設狀態下是隱藏的。
2.如何顯示和隱藏:
通過定時器函數setInterval()每隔指定時間調用一次changeH()函數，此函數可以根據傳遞的值不斷的設置windpop的高度，這樣就實現了此視窗平滑出現和消失的效果。原理大體如上，這裡就不多介紹了。
相關閱讀:
1.parseInt()函數可以參閱JavaScript的parseInt()函數一章節。
2.setInterval()函數可以參閱setInterval()函數用法詳解一章節。
3.toString()函數可以參閱JavaScript的Number對象的toString()方法一章節。
4.clearInterval()函數可以參閱window對象的clearInterval()方法一章節。
5.setTimeout()函數可以參閱window對象的setTimeout()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9418
更多內容可以參閱:http://www.softwhy.com/javascript/
