Artikel ini menjelaskan metode pengalihan efek animasi dari Blinds Horizontal Effect Halaman Web di JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ini adalah efek switching halaman web yang sangat sederhana namun bagus. Setelah mengklik pada halaman web baru, halaman web akan secara otomatis beralih antara tirai biru dan putih sampai semua halaman web sepenuhnya ditampilkan. Kodenya adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<title> JS Web Blinds Efek switching dinamis </iteme>
<tyle>
<!-
.intro {
Posisi: Absolute;
Kiri: 0;
TOP: 0;
Lapisan-Background-Color: Biru;
Latar Belakang: Biru;
Perbatasan: 0.1px Solid Blue
}
->
</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
temp [i] .height = window.innerheight/8
temp2 [i] .top = (i-1)*temp [i] .height
}
}
lain jika (document.all) {
var clipright = document.body.clientwidth, clift = 0
untuk (i = 1; i <= 8; i ++) {
temp [i] = eval ("document.all.i"+i+". style")
temp [i] .width = document.body.clientwidth
temp [i] .height = document.body.offsetheight/8
temp [i] .top = (i-1)*parseint (temp [i] .height)
}
}
fungsi openit () {
window.scrollto (0,0)
if (document.layers) {
untuk (i = 1; i <= 8; i = i+2)
temp [i] .right- = kecepatan
untuk (i = 2; i <= 8; i = i+2)
Temp [i]. Left+= kecepatan
if (Temp [2] .Left> window.innerwidth)
ClearInterval (StopIt)
}
lain jika (document.all) {
clipright- = kecepatan
untuk (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0"+clipright+"auto 0)"
}
clipleft+= kecepatan
untuk (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto auto"+clipleft+")"
}
if (clipright <= 0)
ClearInterval (StopIt)
}
}
fungsi gogo () {
stopit = setInterval ("openit ()", 100)
}
pergi pergi()
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.