横型ブラインドエフェクトを実現するjsメソッドWebページ切り替えアニメーションエフェクト_JavaScriptスキル

この記事の例では、js を使用して横ブラインド効果の Web ページ切り替えアニメーション効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

これは、非常にシンプルですが効果的な Web ページ切り替えエフェクトです。新しい Web ページをクリックすると、Web ページ全体が表示されるまで、Web ページが青と白のシャッター ラインで自動的に切り替わります。コードは次のとおりです:

コードをコピー コードは次のとおりです:

<頭>

<スタイル>

class="intro">

id="i6" 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
temp[i].height=window.innerHeight/8
temp2[i].top=(i-1)*temp[i].height
}
}
else if (document.all){
var Clipright=document.body.clientWidth,clipleft=0
for (i=1;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)
}
}
関数 openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i temp[i].right-=speed
for (i=2;i temp[i].left =速度
if (temp[2].left>window.innerWidth)
clearInterval(stopit)
}
else if (document.all){
クリップライト-=速度
for (i=1;i temp[i].clip="rect(0 " Clipright " auto 0)"
}
クリップ左 =速度
for (i=2;i temp[i].clip="rect(0 auto auto "clipleft")"
}
if (クリップライト clearInterval(stopit)
}
}
関数 gogo(){
stopit=setInterval("openit()",100)
}
ゴゴ()

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。