javascript實現掉落彈出層------Day29

weixin_34088583發表於2017-04-22
JavaScript

顧名思義。所謂“掉落彈出層”。就是出現一個彈出層，而出現的位置是從上方向下掉落。掉落到指定的位置停止，這樣分析起來。和“右下角彈出提醒對話方塊”比起來，確有異曲同工之妙啊，一個從上向下。一個由下及上。

實現原理：

我們最好還是肢解了這個動作來看，能夠大概分為這幾個部分：

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值，或者用程式碼來描寫敘述的話就是

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（）”，這裡就注意引號的使用了，函式名呼叫時不用引號，方法呼叫時帶引號，才發現的。


如今的專案快要收尾了額，頓時感覺輕鬆了好多。今晚能夠早睡會了.....



相關文章