이 기사에서는 녹색 및 흰색 수직 웹 블라인드의 애니메이션 전환 효과를 달성하기위한 JS의 효과에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
우리는 웹 블라인드 스위칭 애니메이션 효과를 설명했지만 수평 맹인입니다. 이것은 수직 블라인드입니다. 코드는 기본적으로 동일합니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> 블라인드 페이지 전환 효과 </title>
<스타일>
<!-
.intro {
위치 : 절대;
왼쪽 : 0;
상단 : 0;
레이어 백 지하색 : 녹색;
배경색 : 녹색;
테두리 : 0.1px 고체 녹색
}
->
</스타일>
</head>
<body>
<div id = "i1"> </div> <div id = "i2"> </div> <div id = "i3"
클래스 = "소개"> </div> <div id = "i4"> </div> <div id = "i5"> </div> <div> <div
id = "i6"> </div> <div id = "i7"> </div> <div id = "i8"> </div>
<script language = "javaScript1.2">
var 속도 = 20
var temp = 새로운 배열 ()
var temp2 = 새로운 배열 ()
if (document.layers) {
for (i = 1; i <= 8; i ++) {
온도 [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 clipbottom = document.body.offsetheight, cliptop = 0
for (i = 1; i <= 8; i ++) {
온도 [i] = eval ( "document.all.i"+i+". Style")
온도 [i] .width = document.body.clientWidth/8
온도 [i] .height = document.body.offsetheight
온도 [i] .left = (i-1)*parseint (temp [i] .width)
}
}
function openit () {
Window.scrollto (0,0)
if (document.layers) {
for (i = 1; i <= 8; i = i+2)
온도 [i] .bottom- = 속도
for (i = 2; i <= 8; i = i+2)
온도 [i] .top+= 속도
if (temp [2] .top> window.innerheight)
ClearInterval (stopit)
}
else if (document.all) {
clipbottom- = 속도
for (i = 1; i <= 8; i = i+2) {
온도 [i] .clip = "rect (0 auto+"+clipbottom+"0)" "
}
cliptop+= 속도
for (i = 2; i <= 8; i = i+2) {
온도 [i] .clip = "rect ("+cliptop+"Auto Auto)"
}
if (clipbottom <= 0)
ClearInterval (stopit)
}
}
기능 gogo () {
stopit = setInterval ( "openit ()", 100)
}
고고 ()
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.