快捷導(dǎo)航

JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法

更新時間：2015年08月06日 15:16:38 作者：皮蛋

這篇文章主要介紹了JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法,實(shí)例分析了javascript創(chuàng)建彈出窗口及窗口掉落與抖動效果實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法。分享給大家供大家參考。具體如下：

這里介紹的JavaScript動畫背景出層，實(shí)現(xiàn)從網(wǎng)頁頂部掉下來的感覺，停止時還帶有緩沖彈跳的意思，從上到下顯示的動畫彈出層，帶關(guān)閉功能，沒有怎么美化，喜歡的用時候息動手美化下，覺得不錯。

運(yùn)行效果如下圖所示：

具體代碼如下：

<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()">[關(guān)閉窗口]</A></DIV>如果想法改變，態(tài)度就會改變；如果習(xí)慣改變，人格就會改變；如果命運(yùn)改變，人生就會改變。</DIV></TD></TR></TBODY></TABLE></CENTER>
</BODY></HTML>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

《JavaScript函數(shù)式編程》讀后感
這里給大家分享的是個人在最近看《JavaScript函數(shù)式編程》一書的第一章之后的一些感觸和理解，這里記錄下來，有需要的小伙伴可以參考下
2015-08-08
微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-01-01
js將json格式的對象拼接成復(fù)雜的url參數(shù)方法
下面小編就為大家?guī)硪黄猨s將json格式的對象拼接成復(fù)雜的url參數(shù)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中,柯里化是一種將使用多個參數(shù)的一個函數(shù)轉(zhuǎn)換成一系列使用一個參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下
2022-06-06
微信小程序在地圖選擇地址并返回經(jīng)緯度簡單示例
這篇文章主要介紹了微信小程序在地圖選擇地址并返回經(jīng)緯度,涉及微信小程序針對經(jīng)緯度地址信息相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
微信小程序使用onreachBottom實(shí)現(xiàn)頁面觸底加載及分頁效果
小程序還沒有使用pc端的那種分頁格式,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用onreachBottom實(shí)現(xiàn)頁面觸底加載及分頁效果的相關(guān)資料,需要的朋友可以參考下
2022-10-10
JS防抖和節(jié)流實(shí)例解析
這篇文章主要介紹了JS防抖和節(jié)流實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
小程序?qū)崿F(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
xmlplus組件設(shè)計(jì)系列之按鈕（2）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
JavaScript阻止表單提交方法（附代碼）
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下
2017-08-08