この記事では、緑と白の垂直ウェブブラインドのアニメーションスイッチング効果を実現するJSの効果について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
Webブラインドスイッチングアニメーション効果について説明しましたが、水平ブラインドです。これは垂直ブラインドです。コードは基本的に同じです：
次のようにコードをコピーします：<html>
<head>
<title>ブラインドページの切り替え効果</title>
<style>
<！ -
.intro {
位置：絶対;
左：0;
上：0;
レイヤーバックグラウンドカラー：緑。
背景色：緑;
ボーダー：0.1pxソリッドグリーン
}
- >
</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>
<スクリプト言語= "javascript1.2">
var速度= 20
var temp = new array（）
var temp2 = new array（）
if（document.layers）{
for（i = 1; i <= 8; i ++）{
temp [i] = eval（ "document.i"+i+"。クリップ"）
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 <= 8; i ++）{
temp [i] = eval（ "document.all.i"+i+"。スタイル"）
temp [i] .width = document.body.clientwidth/8
temp [i] .height = document.body.offsetheight
temp [i] .left =（i-1）*parseint（temp [i] .width）
}
}
function openit（）{
window.scrollto（0,0）
if（document.layers）{
for（i = 1; i <= 8; i = i+2）
temp [i] .bottom- =速度
for（i = 2; i <= 8; i = i+2）
temp [i] .top+=速度
if（temp [2] .top> window.innerheight）
ClearInterval（stopit）
}
else 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）
}
}
function gogo（）{
stopit = setInterval（ "openit（）"、100）
}
ゴーゴー（）
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。