javascript实现掉落弹出层------Day29

标签：javascript   前端   学习记录   div掉落   div抖动   

顾名思义，所谓“掉落弹出层”，就是出现一个弹出层，而出现的位置是从上方向下掉落，掉落到指定的位置停止，这样分析起来，和“右下角弹出提醒对话框”比起来，确有异曲同工之妙啊，一个从上向下，一个由下及上。

实现原理：

我们不妨肢解了这个动作来看，可以大概分为这几个部分：

1、弹出弹出层，弹出层位置在屏幕上方不可见；

2、弹出层从上而下的降落；

3、弹出层到达指定位置，停止降落；

如果加上缓冲弹跳效果的话，就是四部分：

4、出现缓冲弹跳效果，直到静止，而弹跳效果简单了说，就是以停止降落的位置为轴，弹出层不断出现上下对称位置，并且出现位置距离轴距离逐渐变小，知道重合停止跳动，说起来挺别扭，等会写一下代码就明了了，接下来还是一步步进行分析：

实现步骤：

我们首先要出现弹出层，才能有接下来后续的部分，而弹出层的出现，其实可以有以下几种：

*像之前写过的弹出层一样，document.createElement("div");这个在前面已经记录过好几次了呢也

*再有就是提前用html语言写出来，然后用css的样式设置，像visibility：hidden或者display：none，通过js改变其样式visibility：visible或者display：block；这里就不再详细写了。

当然我们需要设定它的弹出位置，其实至关重要的只有一点：它虽然就在那里，但我们看不到它。那它究竟在哪呢，这里假定已经弹出层是已经存在的，为<div id="test" style="width:300px;height:50px;position:absolute;"></div>，而document.body.scrollTop在ie里通常用来表示滚动栏距页面的高度，初始阶段一般都是为0的，这样我们将div的top值设为负的div的高，即height值，或者用代码来描述的话就是

<span style="font-size:12px;">var basePostion= document.body.scrollTop-document.getElementById("test").style.height</span>

<span style="font-size:12px;">dropstart=setInterval("dropin()",50)//这是上面显现方法，就不全部展示了，各自发挥嘛，上面的两种方式随便选
}
function dropin(){//实现掉落的函数
if (parseInt(crossobj.top)<200+</span><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:10px;">document.getbody.scrollTop</span><span style="font-size:12px;"> </span></span><span style="font-size:12px;">){
crossobj.top=parseInt(crossobj.top)+40//这里是每调用一次方法就显露一点，直到全部露出，并不断下降
else{
clearInterval(dropstart)//停止掉落，开始抖动
bouncestart=setInterval(bouncein,50)
}
}</span>

<span style="font-size:12px;">function bouncein(){//这里的初始值可以设定为任意数值，但是一定要是下面的增量的整倍数，这样才能最终与对称轴重合
crossobj.top=parseInt(crossobj.top)-bouncelimit//是说距离上方距离=距离上方的位置-弹跳的幅度，分别在上方和下方显示
if (bouncelimit<0){bouncelimit+=8;<span style="font-family: Arial, Helvetica, sans-serif;">}//这里是增量</span></span>

<span style="font-size:12px;">bouncelimit=bouncelimit*-1//这个地方是实现的关键，无论设定值为多少，都要在下面出现一次，在上面出现一次，才能减小距离
if (bouncelimit==0){
clearInterval(bouncestart)
}
}</span>

其实在原文中，有很多关于兼容的一些设定，看了之后大有感慨，那个之后了解全面了再说吧，不似这个就一个小技巧；

神器setInterval（）；

var a=function（）{}和function a（）{}是可以类同的，所以我们在调用的时候，可以直接调动a，也可以调用“a（）”，这里就注意引号的使用了，函数名调用时不用引号，方法调用时带引号，才发现的。

现在的项目快要收尾了额，顿时感觉轻松了好多，今晚可以早睡会了.....

javascript实现掉落弹出层------Day29,布布扣,bubuko.com

javascript实现掉落弹出层------Day29

标签：javascript   前端   学习记录   div掉落   div抖动   

原文地址：http://blog.csdn.net/marsmile_tbo/article/details/28967725