JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法
本文實(shí)例講述了JS實(shí)現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法。分享給大家供大家參考。具體如下:
這里介紹的JavaScript動畫背景出層,實(shí)現(xiàn)從網(wǎng)頁頂部掉下來的感覺,停止時(shí)還帶有緩沖彈跳的意思,從上到下顯示的動畫彈出層,帶關(guān)閉功能,沒有怎么美化,喜歡的用時(shí)候息動手美化下,覺得不錯(cuò)。
運(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檢測空閑的瀏覽器選項(xiàng)卡
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項(xiàng)卡,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05js+canvas實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07JavaScript使用prototype定義對象類型(轉(zhuǎn))[
JavaScript使用prototype定義對象類型(轉(zhuǎn))[...2006-12-12javascript移動端 電子書 翻頁效果實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript移動端 電子書 翻頁效果實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09淺談async、defer以普通script加載的區(qū)別
本文主要介紹了淺談async、defer以普通script加載的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05js getBoundingClientRect() 來獲取頁面元素的位置
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對位置。2010-11-11純JS實(shí)現(xiàn)出生日期[年月日]下拉菜單效果
這篇文章主要介紹了基于純JS實(shí)現(xiàn)出生日期[年月日]下拉菜單效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-06-06