Artikel ini menjelaskan efek JS untuk mencapai efek switching animasi dari tirai web vertikal hijau dan putih. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Kami menjelaskan efek animasi switching buta web, tetapi itu adalah buta horizontal. Ini adalah buta vertikal. Kode pada dasarnya sama:
Salin kode sebagai berikut: <Html>
<head>
<Title> efek switching halaman buta </iteme>
<tyle>
<!-
.intro {
Posisi: Absolute;
Kiri: 0;
TOP: 0;
Lapisan-Background-Color: Hijau;
Latar Belakang: Hijau;
Perbatasan: 0.1px Solid Green
}
->
</tyle>
</head>
<body>
<div id = "i1"> </div> <div id = "i2"> </div> <div id = "i3"
class = "intro"> </div> <div id = "i4"> </div> <div id = "i5"> </div> <div> <div
id = "i6"> </div> <div id = "i7"> </div> <div id = "i8"> </div>
<bahasa skrip = "javascript1.2">
var speed = 20
var temp = array baru ()
var temp2 = array baru ()
if (document.layers) {
untuk (i = 1; i <= 8; i ++) {
temp [i] = eval ("document.i"+i+". clip")
temp2 [i] = eval ("document.i"+i)
temp [i] .width = window.innerwidth/8-0.3
temp [i] .height = window.innerheight
temp2 [i]., left = (i-1)*temp [i] .width
}
}
lain jika (document.all) {
var clipbottom = document.body.offsetheight, cliptop = 0
untuk (i = 1; i <= 8; i ++) {
temp [i] = eval ("document.all.i"+i+". style")
temp [i] .width = document.body.clientwidth/8
temp [i] .height = document.body.offsetheight
temp [i]., (i-1)*parseint (temp [i] .width)
}
}
fungsi openit () {
window.scrollto (0,0)
if (document.layers) {
untuk (i = 1; i <= 8; i = i+2)
temp [i] .bottom- = kecepatan
untuk (i = 2; i <= 8; i = i+2)
temp [i] .top+= kecepatan
if (temp [2] .top> window.innerheight)
ClearInterval (StopIt)
}
lain jika (document.all) {
clipbottom- = kecepatan
untuk (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto+"+clipbottom+"0)"
}
cliptop+= kecepatan
untuk (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect ("+cliptop+"auto auto)"
}
if (clipbottom <= 0)
ClearInterval (StopIt)
}
}
fungsi gogo () {
stopit = setInterval ("openit ()", 100)
}
pergi pergi()
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.