本文實例講述了JS實現從網頁頂部掉下彈出層效果的方法。分享給大家供大家參考。具體如下：
這里介紹的JavaScript動畫背景出層，實現從網頁頂部掉下來的感覺，停止時還帶有緩沖彈跳的意思，從上到下顯示的動畫彈出層，帶關閉功能，沒有怎么美化，喜歡的用時候息動手美化下，覺得不錯。
運行效果如下圖所示：
具體代碼如下：
<HTML><HEAD><TITLE>窗口從上掉下來</TITLE></HEAD><BODY bgColor=#fef4d9><CENTER> <span class="STYLE1">窗口從上掉下來</span></CENTER><BR><CENTER><TABLE borderColor=#00FFFF border=5 borderlight="green"> <TBODY> <TR> <TD align=middle><span class="STYLE2">效果顯示</span></TD> </TR> <TR> <TD align=middle><SCRIPT language=JavaScript1.2>var ie=document.allvar dom=document.getElementByIdvar ns4=document.layersvar bouncelimit=32 //(must be divisible by 8)var curtopvar direction="up"var boxheight=''function initbox(){if (!dom&&!ie&&!ns4)returncrossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropinscroll_top=(ie)? document.body.scrollTop : window.pageYOffsetcrossobj.top=scroll_top-250crossobj.visibility=(dom||ie)? "visible" : "show"dropstart=setInterval("dropin()",50)}function dropin(){scroll_top=(ie)? document.body.scrollTop : window.pageYOffsetif (parseInt(crossobj.top)<100+scroll_top)crossobj.top=parseInt(crossobj.top)+40else{clearInterval(dropstart)bouncestart=setInterval("bouncein()",50)}}function bouncein(){crossobj.top=parseInt(crossobj.top)-bouncelimitif (bouncelimit<0)bouncelimit+=8bouncelimit=bouncelimit*-1if (bouncelimit==0){clearInterval(bouncestart)}}function dismissbox(){if (window.bouncestart) clearInterval(bouncestart)crossobj.visibility="hidden"}window.onload=initbox</SCRIPT><DIV id=dropin style="LEFT: 300px; VISIBILITY: hidden; WIDTH: 400px; POSITION: absolute; TOP: 250px; HEIGHT: 200px; BACKGROUND-COLOR: #f5f5f5"><DIV align=right><A href="javascript:dismissbox()">[關閉窗口]</A></DIV>如果想法改變，態度就會改變；如果習慣改變，人格就會改變；如果命運改變，人生就會改變。</DIV></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
