Dieser Artikel beschreibt den Effekt von JS, um den Animations -Switching -Effekt von grünen und weißen vertikalen Webjalousien zu erreichen. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Wir haben einen Animationseffekt des Webblindenschalters erklärt, aber es ist ein horizontaler Blind. Dies ist ein vertikaler Blind. Der Code ist im Grunde der gleiche:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<title> Blind -Page -Switching -Effekt </title>
<Styles>
<!-
.intro {
Position: absolut;
links: 0;
Top: 0;
Layer-Background-Color: Grün;
Hintergrundfarbe: Grün;
Grenze: 0,1px Festes Grün
}
->
</style>
</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>
<script Language = "JavaScript1.2">
var speed = 20
var temp = new Array ()
var temp2 = new Array ()
if (document.layers) {
für (i = 1; i <= 8; i ++) {
temp [i] = eval ("document.i"+i+". clip")
temp2 [i] = eval ("document.i"+i)
temp [i] .width = window.innnerwidth/8-0.3
temp [i] .height = window.innerHeight
temp2 [i] .left = (i-1)*temp [i] .width
}
}
sonst if (document.all) {
var clipbottom = document.body.offseteight, cliptop = 0
für (i = 1; i <= 8; i ++) {
temp [i] = eval ("document.all.i"+i+". Stil")
temp [i] .width = document.body.clientwidth/8
temp [i] .height = document.body.offseteight
temp [i] .left = (i-1)*parsesint (temp [i] .width)
}
}
Funktion openit () {
Fenster.Scrollto (0,0)
if (document.layers) {
für (i = 1; i <= 8; i = i+2)
temp [i] .bottom- = Geschwindigkeit
für (i = 2; i <= 8; i = i+2)
temp [i] .top+= Geschwindigkeit
if (temp [2] .Top> Fenster.InnerHeight)
ClearInterval (Stopit)
}
sonst if (document.all) {
clipbottom- = Geschwindigkeit
für (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto+"+clipbottom+"0)"
}
Cliptop+= Geschwindigkeit
für (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect ("+cliptop+"auto auto)"
}
if (clipbottom <= 0)
ClearInterval (Stopit)
}
}
Funktion gogo () {
stopit = setInterval ("openit ()", 100)
}
Gogo ()
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.