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


Posted in Javascript onAugust 06, 2015

本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法。分享给大家供大家参考。具体如下:

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

运行效果如下图所示:

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

具体代码如下:

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

Javascript 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
json简单介绍
2008/06/10 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
React简单介绍
2017/05/24 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python3.x上post发送json数据
2018/03/04 Python
python如何实现反向迭代
2018/03/20 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
Python 硬币兑换问题
2019/07/29 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
党员培训思想汇报
2014/01/07 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
综合实践活动总结
2014/05/05 职场文书
团队口号大全
2014/06/06 职场文书
股份合作协议书
2014/09/10 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL