Kaedah JS untuk mencapai kesan lapisan pop timbul jatuh dari bahagian atas halaman web kemahiran javascript-tutorial js-php.cn

Kaedah JS untuk mencapai kesan lapisan pop timbul jatuh dari bahagian atas halaman web kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:46:33

asal

1240 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara menggunakan JS untuk mencapai kesan lapisan pop timbul jatuh dari bahagian atas halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Lapisan pop timbul latar belakang animasi JavaScript yang diperkenalkan di sini boleh mencapai perasaan jatuh dari bahagian atas halaman web Ia juga mempunyai makna penimbal dan melantun apabila dihentikan Lapisan pop timbul animasi yang dipaparkan dari atas ke bawah mempunyai fungsi penutup dan tidak dicantikkan Saya suka apabila saya menggunakannya, saya mula mencantikkannya, dan saya fikir ia bagus.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<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)&#63;document.getElementById("dropin").style : ie&#63; document.all.dropin : document.dropin
scroll_top=(ie)&#63; document.body.scrollTop : window.pageYOffset
crossobj.top=scroll_top-250
crossobj.visibility=(dom||ie)&#63; "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)&#63; 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()">[关闭窗口]</A></DIV>如果想法改变，态度就会改变；如果习惯改变，人格就会改变；如果命运改变，人生就会改变。</DIV></TD></TR></TBODY></TABLE></CENTER>
</BODY></HTML>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.