| ポイント |
<![CDATA[
myIMG.filters[1].apply();
myIMG.filters[2].apply();
myIMG.filters[1].play();
myIMG.filters[2].play();
<img src="sample.jpg" id="myIMG" style="filter:alpha(opacity=0) revealTrans(duration=5,transition=12) revealTrans(duration=5,transition=10)">
]]>
|
| 説 明 |
ワイプ（トランジション）効果はスタイルシートのfilterで複数記述することができます。複数記述することで複雑なワイプ効果も表現できます。実際に切り替える場合は「オブジェクト名.filters[参照番号].apply()」と「オブジェクト名.filters[参照番号].play()」を指定します。参照番号は複数フィルタ効果を指定した場合、最初が0次が1というように連番になります。またfilters[0]はfilters.item(0)と記述することもできます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ページが読み込まれたらフィルタとワイプで画像を表示する</title>
<script language="JavaScript"><!--
n = 0;
function wipe()
{
myIMG.filters[1].apply();
myIMG.filters[2].apply();
myIMG.filters[1].play();
myIMG.filters[2].play();
setTimeout("setAlpha()",200);
}
function setAlpha()
{
n += 10;
myIMG.filters[0].opacity = n;
if (n < 100) setTimeout("setAlpha()",200);
}
// --></script>
</head>
<body onLoad="wipe()">
<img src="sample.jpg" id="myIMG" style="filter:alpha(opacity=0) revealTrans(duration=5,transition=12) revealTrans(duration=5,transition=10)">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ページが読み込まれたらフィルタとワイプで画像を表示する