zoukankan      html  css  js  c++  java
  • javascript实现掉落弹出层------Day29

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

    实现原理:

    我们最好还是肢解了这个动作来看,能够大概分为这几个部分:

    1、弹出弹出层,弹出层位置在屏幕上方不可见。

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

    3、弹出层到达指定位置,停止降落。

    假设加上缓冲弹跳效果的话,就是四部分:

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


    实现步骤:

    我们首先要出现弹出层,才干有接下来兴许的部分,而弹出层的出现。事实上能够有下面几种:

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

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

    当然我们须要设定它的弹出位置,事实上至关重要的仅仅有一点:它尽管就在那里,但我们看不到它。

    那它到底在哪呢,这里假定已经弹出层是已经存在的,为<div id="test" style="300px;height:50px;position:absolute;"></div>,而document.body.scrollTop在ie里通经常使用来表示滚动条距页面的高度,初始阶段一般都是为0的。这样我们将div的top值设为负的div的高,即height值,或者用代码来描写叙述的话就是

    var basePostion= document.body.scrollTop-document.getElementById("test").style.height
    这样我们有了弹出层。就要来实现它,又要用到我们熟悉的setInterval()了,神器啊

    dropstart=setInterval("dropin()",50)//这是上面显现方法,就不所有展示了,各自发挥嘛,上面的两种方式随便选
    }
    function dropin(){//实现掉落的函数
    if (parseInt(crossobj.top)<200+document.getbody.scrollTop){
    crossobj.top=parseInt(crossobj.top)+40//这里是每调用一次方法就显露一点。直到所有露出,并不断下降
    else{
    clearInterval(dropstart)//停止掉落,開始抖动
    bouncestart=setInterval(bouncein,50)
    }
    }
    事实上,这里仅仅是将设定距离定在了200上。到这里我们假想,假设将指定的距离变大,再将滚动栏去掉的话,是不是就是一个完整的游戏滚屏啊。听起来不错的样子,不知道是不是真的这么实现的。

    书归正传。我们来设定一下最后的这个弹跳效果,一个小应用。可是会增色不少。

    function bouncein(){//这里的初始值能够设定为随意数值,可是一定要是以下的增量的整倍数。这样才干终于与对称轴重合
    crossobj.top=parseInt(crossobj.top)-bouncelimit//是说距离上方距离=距离上方的位置-弹跳的幅度,分别在上方和下方显示
    if (bouncelimit<0){bouncelimit+=8;}//这里是增量
    bouncelimit=bouncelimit*-1//这个地方是实现的关键。不管设定值为多少。都要在以下出现一次,在上面出现一次。才干减小距离
    if (bouncelimit==0){
    clearInterval(bouncestart)
    }
    }
    知识点总结:

    事实上在原文中,有非常多关于兼容的一些设定。看了之后大有感慨,那个之后了解全面了再说吧。不似这个就一个小技巧;

    神器setInterval();

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


    如今的项目快要收尾了额,顿时感觉轻松了好多。今晚能够早睡会了.....



  • 相关阅读:
    P5858
    P1171
    树莓派显示CPU温度
    Docker容器文件系统位置
    Python返回列表中距离最小的点
    【实用】ubuntu和python快速换源
    shell下实现echo彩色输出
    mysql查询主表有数据,副表0条数据的列表
    swagger加请求头带token
    Error running $classname: Command line is too long. Shorten command line for $classname
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/6747905.html
Copyright © 2011-2022 走看看