Heim > Artikel > Web-Frontend > JS-Methode, um den Effekt einer Popup-Ebene zu erzielen, die von oben auf die Webseite fällt_Javascript-Fähigkeiten

JS-Methode, um den Effekt einer Popup-Ebene zu erzielen, die von oben auf die Webseite fällt_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:46:331237Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JS den Effekt erzielen, dass die Popup-Ebene vom oberen Rand der Webseite herunterfällt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die hier eingeführte Popup-Ebene für den JavaScript-Animationshintergrund kann das Gefühl erzeugen, vom oberen Rand der Webseite herunterzufallen. Sie hat auch die Bedeutung, dass die animierte Popup-Ebene von oben nach unten angezeigt wird Hat eine Abschlussfunktion und ist nicht verschönert. Als ich es benutzte, fing ich an, es zu verschönern, und ich fand es gut.

Der Betriebseffekt ist in der folgenden Abbildung dargestellt:

Der spezifische Code lautet wie folgt:

<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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery realisiert den Animationseffektkreis example_jqueryNächster Artikel：jQuery realisiert den Animationseffektkreis example_jquery

In Verbindung stehende Artikel

Mehr sehen