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

这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错。

运行效果如下图所示:

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

具体代码如下:

<HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9> <CENTER> <span>窗口从上掉下来</span> </CENTER><BR> <CENTER> <TABLE borderColor=#00FFFF border=5 borderlight="green"> <TBODY> <TR> <TD align=middle><span>效果显示</span></TD> </TR> <TR> <TD align=middle> <SCRIPT language=JavaScript1.2> var ie=document.all var dom=document.getElementById var ns4=document.layers var bouncelimit=32 //(must be divisible by 8) var curtop var direction="up" var boxheight='' function initbox(){ if (!dom&&!ie&&!ns4) return crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin scroll_top=(ie)? document.body.scrollTop : window.pageYOffset crossobj.top=scroll_top-250 crossobj.visibility=(dom||ie)? "visible" : "show" dropstart=setInterval("dropin()",50) } function dropin(){ scroll_top=(ie)? document.body.scrollTop : window.pageYOffset if (parseInt(crossobj.top)<100+scroll_top) crossobj.top=parseInt(crossobj.top)+40 else{ clearInterval(dropstart) bouncestart=setInterval("bouncein()",50) } } function bouncein(){ crossobj.top=parseInt(crossobj.top)-bouncelimit if (bouncelimit<0) bouncelimit+=8 bouncelimit=bouncelimit*-1 if (bouncelimit==0){ clearInterval(bouncestart) } } function dismissbox(){ if (window.bouncestart) clearInterval(bouncestart) crossobj.visibility="hidden" } window.onload=initbox </SCRIPT> <DIV id=dropin> <DIV align=right><A href="javascript:dismissbox()">[关闭窗口]</A></DIV>如果想法改变,态度就会改变;如果习惯改变,人格就会改变;如果命运改变,人生就会改变。</DIV></TD></TR></TBODY></TABLE></CENTER> </BODY></HTML>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdyzz.html