この記事の例では、緑と白の垂直 Web ページ シャッター アニメーション切り替え効果の JS 実装について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
先ほど、Web ページのシャッター切り替えアニメーション効果について説明しましたが、これは水平シャッター、これは垂直シャッターで、コードは基本的に同じです。
<頭>
ブラインドのページ切り替え効果
<スタイル>
class="intro">
<スクリプト言語="JavaScript1.2">
var 速度=20
var temp=新しい配列()
var temp2=新しい配列()
if (document.layers){
for (i=1;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
for (i=1;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){
for (i=1;i
temp[i].bottom-=speed
for (i=2;i
temp[i].top =速度
if (temp[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
クリップボトム-=速度
for (i=1;i
temp[i].clip="rect(0 auto "clipbottom" 0)"
}
クリップトップ = スピード
for (i=2;i
temp[i].clip="rect(" クリップトップ " 自動自動)"
}
if (clipbottom
clearInterval(stopit)
}
}
関数 gogo(){
stopit=setInterval("openit()",100)
}
ゴゴ()
