JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍原生js实现弹出层效果，包括了原生js实现弹出层效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 1.遮罩层的宽度和高度是js获取页面的宽高（页面内容） 2.登录框设置静止定位fixed 3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2 完整代码 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍JS简单实现动画弹出层效果，包括了JS简单实现动画弹出层效果的使用技巧和注意事项，需要的朋友参考一下 JS简单实现动画弹出层效果 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍JS实现网页顶部向下滑出的全国城市切换导航效果，包括了JS实现网页顶部向下滑出的全国城市切换导航效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现网页顶部向下滑出的全国城市切换导航效果。分享给大家供大家参考。具体如下： 这是一款JS版网页顶部向下滑出的城市切换导航，仿sohu团购网页顶部的城市导航切换，从顶部向下滑出，方便在其他城市之间切换。使用了sohu网原版的一
-
本文向大家介绍原生js实现网页顶部自动下拉/收缩广告效果，包括了原生js实现网页顶部自动下拉/收缩广告效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 1.实现原理： 通过递归改变div的高度值达到缓慢下拉的效果。 2.一共分为3个步骤我写了三个函数 第一个show()函数（下拉）：初始值高度h<300的话 h+5 反之return退出停止，调用setTimeout方法30毫秒执行一次+5
-
本文向大家介绍js实现div弹出层的方法，包括了js实现div弹出层的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下： 话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西，下面来给各位分享一个原生太js div弹出层实例，有需要的朋友可一起看看。 这个不用多说了,直接
-
本文向大家介绍js实现仿Discuz文本框弹出层效果，包括了js实现仿Discuz文本框弹出层效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现仿Discuz文本框弹出层效果。分享给大家供大家参考。具体如下： 这是一个在经典论坛曾经热讨论的问题，记得在QQ邮箱里也有类似功能，Discuz7.0论坛里同样也有，当你的鼠标单击文本框的时候，会弹出一个包含文字、图片、表单无素的DIV层