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

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

具體代碼如下：

<HTML><HEAD><TITLE>窗口從上掉下來(lái)</TITLE>
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
 <span class="STYLE1">窗口從上掉下來(lái)</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)度就會(huì)改變；如果習(xí)慣改變，人格就會(huì)改變；如果命運(yùn)改變，人生就會(huì)改變。</DIV></TD></TR></TBODY></TABLE></CENTER>
</BODY></HTML>

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

您可能感興趣的文章: