案例制作思路：
1、先制作界面
添加一個盒子包含一個按鈕，使盒子絕對定位在右上角
添加一個大盒子，同理，將盒子居於左下角；其中內部包含一個頂端盒子和底部盒子
頂端盒子因為是屬於大盒子內部的存在，所以寬度是占滿整個大盒子的寬度，內部文本設置字體12號、居中顯示、加粗
底部盒子因為也是屬於大盒子內部的存在，所以寬度也是占滿整個大盒子的寬度，內部文本設置字體12號、居中顯示、加粗、行高等
2、經思考分析，因為頁面是在打開后3秒中進行跳轉，所以需要一個延遲定時器(SetTimeout(code,millisec); code是代表一個函數的引用，millisec代表定時的毫秒數) 。所以頁面一打開是沒有廣告存在的，所以在大盒子的css中不存在高度的設置，另設置了隱藏顯示的屬性！
3、獲取盒子的位置，並且設置其高度，進行接收。但是因為后的是一個對象，需要將對象進行轉換成為數字。
4、如果該數字等於0 ，表示該盒子處於隱藏的狀態，則將其通過display屬性中的block塊狀 來顯現出來。【此時在右下角已然存在盒子了，只不過高度為0，需要放大進行查看】
5、接下來，我們來操作盒子的高度問題。
解決方案：我們可以通過定時器去完成盒子的高度設置。
5.1.1、獲取盒子
5.1.2、獲取盒子的高度
5.1.3、判斷接收到的參數是盒子高度遞增或遞減，若是遞增參數，則需要判斷盒子是否依然顯示，若沒有，將其遞增顯示，否則清除遞增定時器。 若是遞減參數，則需要判斷盒子是否依然顯示，若顯示，將其遞減到0，否則清除遞增定時器並且隱藏盒子。
預覽效果圖：
Html代碼：
<html> </head> <body> <div id="div"> <button onclick="tips_pop()">3秒后會在右下角自動彈出窗口，如果沒有彈出請點擊這個按鈕</button> </div> <!--大盒子--> <div id="ad"> <!--頂端小盒子--> <div class="toppop"> <b>您有新的短消息！</b><span onclick="tips_pop()">X</span> </div> <!--底端小盒子--> <div class="bottompop">1條未讀信息(...)</div> </div> </body> </html>
Css代碼：
#div{ /*按鈕盒子*/ position: absolute; /*大盒子的定位為絕對定位*/ right: 0; /*大盒子距離右方為0像素*/ top: 0; /*大盒子距離上方為0像素*/ } #ad{ /*大盒子*/ width: 200px; /*大盒子的寬度*/ height: 0; /*大盒子的高度*/ border: 1px solid #666;/*邊框線為1像素 實線 灰黑色*/ position:absolute; /*大盒子的定位為絕對定位*/ bottom: 0px; /*大盒子距離下方為0像素*/ right: 0px; /*大盒子距離右方為0像素*/ display: none; /*不顯示*/ } .toppop{ /*頂端盒子*/ width: 100%; /*寬度自動適應到最寬*/ height: 22px; /*上面的盒子高22像素*/ background: gold; /*背景顏色為金黃色*/ text-align: center; /*字體居中*/ font-size: 12px; /*字號為12像素*/ } .toppop span{ /*頂端盒子 中的 X*/ position: absolute; /*位置：絕對定位*/ right: 0; /*距離右側邊距為0*/ top: -1px; /*距離頂端距離為-1像素*/ color: #fff; /*“X”的顏色為白色*/ cursor: pointer; /*cursor 代表的是光標的類型；pointer代表 的是 一只小手*/ } .bottompop{ /*底端盒子*/ width: 100%; /*寬度自動適應到最寬*/ height: 88px; /*下面的盒子高88像素*/ font-size: 12px; /*字號為12像素*/ text-align: center; /*字體居中*/ font-weight: 900px; /*字體為粗體*/ color: #ff0000; /*顏色為紅色*/ line-height: 80px; /*字體的行高為80像素*/
JavaScript代碼：
<script type="text/javascript"> window.onload = function(){ // 頁面加載 document.getElementById("ad").style.height = '0px' // setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。 setTimeout("tips_pop()",3000); // 設置定時器（每過3秒執行一次tips_pop） } function tips_pop(){ var Msgpop = document.getElementById("ad"); // parseInt() 函數可解析一個對象,並返回一個整數 var popH = parseInt(Msgpop.style.height) // 將對象的高度轉換成為數字 if(popH == 0){ //如果盒子的高度等於0 ，表示看不到 所以 處於一個隱藏狀態 Msgpop.style.display="block"; //如果等於0，則去顯示出來 show = setInterval("changeH('up')",3)// 設置定時器（顯示的函數） }else{ hide = setInterval("changeH('down')",3)// 設置定時器（隱藏的函數） } } function changeH(str){ var Msgpop = document.getElementById("ad");//Msgpop 代表的是大盒子 var popH = parseInt(Msgpop.style.height);//將對象的高度轉換成為數字 //popH 代表盒子的高度 [是數字] if(str == 'up'){ // 判斷接受的參數是否是 up 如果是 則執行下方內容 if(popH <= 100){ //JavaScript toString()把數字轉換為字符串: 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 } } }
作者： 楊校
出處： http://www.cnblogs.com/xiaoxiao5016
分享是快樂的，也見證了個人成長歷程，文章大多都是工作經驗總結以及平時學習積累，基於自身認知不足之處在所難免，也請大家指正，共同進步。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 如有問題， 可郵件（397583050@qq.com）咨詢。