JS实现从网页顶部掉下弹出层效果的方法
更新时间：2015年08月06日 15:16:38 作者：皮蛋
这篇文章主要介绍了JS实现从网页顶部掉下弹出层效果的方法,实例分析了javascript创建弹出窗口及窗口掉落与抖动效果实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了如何使用JavaScript检测空闲的浏览器选项卡，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了js+canvas实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最近这个项目需要注册时用户填写出生日期，然后自动取得星座，想想好像用后台代码太麻烦只好转而使用JavaScript。2010-07-07
JavaScript使用prototype定义对象类型(转)[
JavaScript使用prototype定义对象类型(转)[...2006-12-12
这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了js实现拖动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了浅谈async、defer以普通script加载的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
js getBoundingClientRect() 来获取页面元素的位置
该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。2010-11-11![纯JS实现出生日期[年月日]下拉菜单效果](//img.jbzj.com/images/xgimg/bcimg9.png)
这篇文章主要介绍了基于纯JS实现出生日期[年月日]下拉菜单效果，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2018-06-06
![纯JS实现出生日期[年月日]下拉菜单效果](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论