エレメントをトランジション表示する
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
.btn {							/* btn というクラス名のスタイル */
	width: 90px;					/* 横幅 */
	background-color: #ffffff;			/* 背景色 */
	border: 1px solid #c0c0c0;			/* 線の太さ、線の種類、枠線の色 */
	font-size: 10pt;				/* フォントの大きさ */
}
#menu {							/* menu という id 名のスタイル */
	position: absolute;				/* 表示位置の設定 */
	visibility: hidden;				/* 非表示の設定 */
	background-color: #ffeeff;			/* 背景色 */
	border: 1px dotted #0000ff;			/* 線の太さ、線の種類、枠線の色 */
	padding: 5px;					/* 上下左右の余白 */
	filter: revealTrans(Duration=0.5, Transition=0);/* トランジションの効果と時間 */
}
-->
</style>
<script type="text/javascript">
<!--
function show(id) {
	if (!window.clipboardData) return true;

	var ele = document.all(id);
	ele.filters[0].Apply();				// ele.filters.revealTrans.Apply();
	if (ele.style.visibility == "visible") {
		ele.style.visibility = "hidden";
	}
	else {
		ele.style.top = event.offsetY;
		ele.style.left = event.offsetX;
		ele.style.visibility = "visible";
	}
	ele.filters[0].Play();

	return false;
}
// -->
</script>
</head>
<body>

<!-- ここからはスタイルシートによって通常は非表示にされています -->
<form action="#" id="menu">
<input type="button" value="前のページに&#10;戻る" onclick="location.href = '../index.html';" class="btn">
<input type="button" value="トップページに&#10;戻る" onclick="location.href = '../../index.html';" class="btn">
<input type="button" value="CLOSE" onclick="show('menu')"; title="閉じる" class="btn">
</form>
<!-- ここまで -->

<a href="../index.html" onclick="return show('menu');">戻る</a>
</body>
</html>
戻る

このページ内の show に指定した引数 id(この場合 menu)は表示していますか?という分岐に対して、表示されていれば「hidden」で非表示にして、表示されていなければ「visible」で表示します。

表示時にはマウスをクリックした位置を取得してクリックした所に表示します。そのときにトランジションの効果を得るために document.all(id).filters[0] または、document.all(id).filters.revealTrans として Apply() で有効にして Play() で実行します。

Apply() と Play() メソッドの詳しい情報は、Microsoft のフィルタとトランジションを参照してください。トランジションを使用しますので、Windows 版の Internet Explorer 以外のブラウザや JavaScript が無効状態の時にはアンカーに指定したリンク先が表示されます。

※トランジションは Internet Explorer 10 以降で使用不可になりました。DX フィルターがサポートされなくなった

[PR] ホットペッパー