집 > 기사 > 웹 프론트엔드 > 웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 구현하는 JS 방법_javascript 기술

웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 구현하는 JS 방법_javascript 기술

WBOY원래의: 2016-05-16 15:46:331234검색

이 기사의 예에서는 JS를 사용하여 웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서 소개하는 자바스크립트 애니메이션 배경 팝업 레이어는 웹 페이지 상단에서 떨어지는 느낌을 줄 수 있으며, 정지 시 위에서 아래로 표시되는 애니메이션 팝업 레이어의 의미도 있습니다. 클로징 기능이 있고 미화되지 않아서 좋아요. 사용하다 보니 미화되기 시작했는데 좋은 것 같아요.

작동 효과는 아래와 같습니다.

구체적인 코드는 다음과 같습니다.

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

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery는 애니메이션 효과 원을 실현합니다. example_jquery다음 기사：jQuery는 애니메이션 효과 원을 실현합니다. example_jquery

웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 구현하는 JS 방법_javascript 기술

관련 기사