網頁右下角彈出廣告資訊框例項程式碼

antzone發表於2017-03-14
網頁

右下角彈出視窗效果是常見的彈出視窗效果之一，比如可以作為廣告視窗，也可以作為網站的一些公告或者通知，非常的實用，下面就通過例項簡單介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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.讓視窗居於網頁的右下角:

實現程式碼如下:

[CSS] 純文字檢視 複製程式碼
#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()一章節。

相關文章