JS实现从网页顶部掉下弹出层效果的方法

2019-11-20 11:53:56

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JavaScript实现自动弹出窗口并自动关闭窗口的方法

下一篇：JS实现可直接显示网页代码运行效果的HTML代码预览功能实例