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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
js仿淘宝放大镜效果
Dec 28 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.ini 中文版
2006/10/28 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
利用JS实现数字增长
2016/07/28 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
个人评价范文分享
2014/01/11 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
小学课外活动总结
2014/07/09 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
副总经理岗位职责
2015/02/02 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
详细介绍python类及类的用法
2021/05/31 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android