JS实现从网页顶部掉下弹出层效果的方法
皮蛋 人气:0本文实例讲述了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.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 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程序设计有所帮助。
加载全部内容