JS는 녹색과 흰색 수직 웹 페이지 블라인드 애니메이션 전환 효과를 실현합니다_javascript 기술

이 기사의 예에서는 녹색 및 흰색 수직 웹 페이지 셔터 애니메이션 전환 효과의 js 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

앞서 웹 페이지 셔터 전환 애니메이션 효과에 대해 설명했지만 가로 셔터이고 세로 셔터이며 코드는 기본적으로 동일합니다.

코드 복사 코드는 다음과 같습니다.

<스타일>

class="intro">

id="i6" class="intro">

<스크립트 언어="JavaScript1.2">
var 속도=20
var temp=new 배열()
var temp2=새 배열()
if (document.layers){
(i=1;i temp[i]=eval("document.i" i ".clip")
temp2[i]=eval("document.i" i)
온도[i].width=window.innerWidth/8-0.3
온도[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width
}
}
else if (document.all){
var clipsbottom=document.body.offsetHeight,cliptop=0
(i=1;i temp[i]=eval("document.all.i" i ".style")
임시[i].width=document.body.clientWidth/8
임시[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
}
}
함수 openit(){
window.scrollTo(0,0)
if (document.layers){
(i=1;i 온도[i].bottom-=속도
(i=2;i temp[i].top =속도
if (temp[2].top>window.innerHeight)
클리어 인터벌(중지)
}
else if (document.all){
클립하단-=속도
(i=1;i temp[i].clip="Rect(0 auto "clipbottom " 0)"
}
클립탑 =속도
(i=2;i temp[i].clip="Rect("cliptop " 자동 자동)"
}
if (clipbottom<=0)
클리어 인터벌(중지)
}
}
함수 gogo(){
stopit=setInterval("openit()",100)
}
고고()