cari

Rumah >hujung hadapan web >tutorial js >Kaedah JS untuk mencapai kesan lapisan pop timbul jatuh dari bahagian atas halaman web kemahiran javascript

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

WBOY
WBOYasal
2016-05-16 15:46:331286semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery menyedari bulatan kesan animasi example_jqueryArtikel seterusnya：jQuery menyedari bulatan kesan animasi example_jquery

Artikel berkaitan

Lihat lagi