顾名思义,所谓“掉落弹出层”,就是出现一个弹出层,而出现的位置是从上方向下掉落,掉落到指定的位置停止,这样分析起来,和“右下角弹出提醒对话框”比起来,确有异曲同工之妙啊,一个从上向下,一个由下及上。
实现原理:
我们不妨肢解了这个动作来看,可以大概分为这几个部分:
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>这样我们有了弹出层,就要来实现它,又要用到我们熟悉的setInterval()了,神器啊
<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>其实,这里只是将设定距离定在了200上,到这里我们假想,如果将指定的距离变大,再将滚动条去掉的话,是不是就是一个完整的游戏滚屏啊,听起来不错的样子,不知道是不是真的这么实现的。书归正传,我们来设定一下最后的这个弹跳效果,一个小应用,但是会增色不少。
<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
原文:http://blog.csdn.net/marsmile_tbo/article/details/28967725