脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS从网页顶部掉下弹出层效果

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 原生JS实现几个常用DOM操作API实例

    原生JS实现几个常用DOM操作API实例

    下面小编就为大家带来一篇原生JS实现几个常用DOM操作API实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JavaScript 中的replace方法说明

    JavaScript 中的replace方法说明

    JavaScript 中的replace方法说明...
    2007-04-04
  • ES6新特性四：变量的解构赋值实例

    ES6新特性四：变量的解构赋值实例

    这篇文章主要介绍了ES6新特性之变量的解构赋值操作,结合实例形式分析了ES6针对数组、对象等的解构赋值操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • javascript dragable的Move对象

    javascript dragable的Move对象

    一个dragable的Move对象,大家可以运行下，测试看下效果。
    2009-08-08
  • js获取html的span标签的值方法(超简单)

    js获取html的span标签的值方法(超简单)

    下面小编就为大家带来一篇js获取html的span标签的值方法(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript实现tab栏切换效果

    JavaScript实现tab栏切换效果

    这篇文章主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript游戏之是男人就下100层代码打包

    JavaScript游戏之是男人就下100层代码打包

    不知不觉，就到了11月份了，其实我为啥要写js游戏，觉得游戏更能引起共鸣。11月份开篇之作：是男人就下100层，相信大家都玩过。
    2010-11-11
  • GoJs面板绘图模板go.Panel使用示例详解

    GoJs面板绘图模板go.Panel使用示例详解

    这篇文章主要为大家介绍了GoJs面板绘图模板go.Panel使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 详解ES6 Symbol 的用途

    详解ES6 Symbol 的用途

    Symbol 唯一的用途就是标识对象属性，表明对象支持的功能。 这篇文章给大家介绍ES6 Symbol 的用途，感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • javascript控制台详解

    javascript控制台详解

    本文是写在2011年，主要介绍 “Firefox” 浏览器插件 “Firebug” 的操作，如今主流浏览器对控制台都已经提供了很好的支持。我自己用的最多是谷歌的 “chrome” 浏览器，下面也用 “chrome” 浏览器来调试。
    2015-06-06

最新评论