ボタンをクリックする度に、文字列→画像→文字列→画像→表 の順に切り替わっていく。
revealTransとは
指定した一定の間隔で視覚効果を出す
IE専用で、version4.0以上に対応
revealTransの設定書式
style="filter:revealTrans(transition=t,duration=d)"
t･･･トランジション番号(0〜23 の数値)
d･･･効果の持続時間(秒単位）、何秒かけて切り替えるかの指定。
| Box In | ID=0 | 外側から四角形に縮小し消えていく |
| Wipe Up | ID=4 | 背景要素が下から上に伸び、前景要素を消していく |
| Random | ID=23 | トランジションをランダムに選び実行する |
Sample Source......................................................................>>>
<STYLE TYPE="text/css">
<!--
.obj {position: absolute;left:200px;top:80px; border:thin solid green; width:250 ;height:200; filter:revealTrans();visibility:hidden;}
-->
</STYLE>
<script language="JavaScript">
<!--
n = 1; //HTML要素に付けたID名の番号
old_obj = ""; //直前のHTML要素を記憶(これをhiddenにする)
t = 23; //revealTransの種類を表す番号
function Show(){
obj = eval("obj" +n); //revealTrans効果を適用するHTML要素のID名
if (obj.filters.revealTrans.Status == 0){
obj.filters.revealTrans.Apply();
obj.filters.revealTrans.Transition = t; //revealTransの種類
if(--t < 0)t = 23; //revealTrans番号を1づつ減算し、0未満になったら23に初期化
if(old_obj != "")old_obj.style.visibility = "hidden";//現在表示されているものを非表示に
obj.style.visibility = "visible";
obj.filters.revealTrans.Play(3); //3秒かけてrevealTrans効果を実行する
old_obj = obj; //現在のHTML要素を記憶しておく
if(++n > 5)n = 1; //ID名の番号を1加算し、5を超えたら1に初期化
}
}
// -->
</script>
</head>
<body>
<form name="form1" >
<input type="button" value="revealTrans効果" onclick="Show()">
</form>
<div id="obj1" class="obj">
<p style="font:18">revealTransとは</p><hr>
<p>指定した一定の間隔で視覚効果を出す</p>
<p>IE専用で、version4.0以上に対応</p>
</div>
<img id="obj2" class="obj" src="../../java/jadata/ja02a.jpg">
<div id="obj3" class="obj">
<p style="font:18">revealTransの設定書式</p><hr>
<p>style="filter:revealTrans(transition=t,duration=d)"</p>
<p>t･･･ﾄﾗﾝｼﾞｼｮﾝ番号(0〜23 の数値)<br>
d･･･効果の持続時間(秒単位）、何秒かけて切り替えるかの指定。</p>
</div>
<img id="obj4" class="obj" src="../../java/jadata/pho_003.gif">
<table id="obj5" class="obj" cellspacing="3" cellpadding="2" border="1">
<tr>
<td>Box In</td>
<td>ID=0</td>
<td>外側から四角形に縮小し消えていく</td>
</tr>
<tr>
<td> Wipe Up</td>
<td>ID=4</td>
<td>背景要素が下から上に伸び、前景要素を消していく</td>
</tr>
<tr>
<td>Random</td>
<td>ID=23</td>
<td>ﾄﾗｼﾞｼｮﾝをﾗﾝﾀﾞﾑに選び実行する</td>
</tr>
</table>
end(最終更新:12/11/16)