Cet article décrit l'effet de JS pour réaliser l'effet de commutation d'animation des stores Web verticaux verts et blancs. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Nous avons expliqué un effet d'animation de commutation Web à l'aveugle, mais c'est un aveugle horizontal. Ceci est un aveugle vertical. Le code est fondamentalement le même:
Copiez le code comme suit: <html>
<adal>
<Title> Effet de commutation de la page de l'aveugle </TITAL>
<style>
<! -
.intro {
Position: absolue;
à gauche: 0;
en haut: 0;
Couche-fond Color: vert;
Color en arrière-plan: vert;
Border: 0,1px vert solide
}
->
</ 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 linguisse = "javascript1.2">
Var Speed = 20
var temp = new Array ()
var temp2 = new Array ()
if (document.layers) {
pour (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
}
}
else if (document.all) {
var clipbottom = document.body.offsetheight, cliptop = 0
pour (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] .left = (i-1) * parseInt (temp [i] .width)
}
}
fonction openIt () {
window.scrollto (0,0)
if (document.layers) {
pour (i = 1; i <= 8; i = i + 2)
temp [i] .bottom- = vitesse
pour (i = 2; i <= 8; i = i + 2)
temp [i] .top + = vitesse
if (temp [2] .top> window.innerheight)
ClearInterval (stopit)
}
else if (document.all) {
clipbottom- = vitesse
pour (i = 1; i <= 8; i = i + 2) {
temp [i] .clip = "rect (0 auto +" + clipbottom + "0)"
}
Cliptop + = vitesse
pour (i = 2; i <= 8; i = i + 2) {
temp [i] .clip = "rect (" + cliptop + "auto auto)"
}
if (clipbottom <= 0)
ClearInterval (stopit)
}
}
function gogo () {
stopIt = setInterval ("openIt ()", 100)
}
GOGO ()
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.