В этой статье описывается влияние JS для достижения эффекта переключения анимации зеленых и белых вертикальных веб -жалюзи. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Мы объяснили эффект анимации веб -слепого переключения, но это горизонтальный слепой. Это вертикальный слепой. Код в основном такой же:
Скопируйте код следующим образом: <html>
<голова>
<Title> эффект переключения слепой страницы </title>
<style>
<!-
.intro {
позиция: абсолютно;
слева: 0;
Верх: 0;
Слои-грань-цвета: зеленый;
фоновый цвет: зеленый;
Граница: 0,1px твердый зеленый
}
->
</style>
</head>
<тело>
<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) {
for (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
}
}
еще if (document.all) {
var clipbottom = document.body.offsetheight, cliptop = 0
for (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)
}
}
функция openit () {
window.scrollto (0,0)
if (document.layers) {
для (i = 1; i <= 8; i = i+2)
Temp [i] .bottom- = скорость
для (i = 2; i <= 8; i = i+2)
Temp [i] .top+= скорость
if (temp [2] .top> window.innerheight)
ClearInterval (Stopit)
}
еще if (document.all) {
clipbottom- = скорость
for (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto+"+clipbottom+"0)"
}
cliptop+= скорость
for (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect ("+cliptop+"Auto Auto)"
}
if (clipbottom <= 0)
ClearInterval (Stopit)
}
}
функция gogo () {
Stopit = setInterval ("openit ()", 100)
}
gogo ()
</script>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.