要素の透明度を変えてみた

javascript CSS

要素を透明/不透明化させるjavascriptのライブラリみたく、cssのopacityを弄って
背景色を濃くしたり、薄くしたりしてみた。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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">
<style type="text/css">
div#opa1, div#opa2 {
	width: 300px;
	height: 200px;
	background-color: #808080;
	padding: 1em;
}
div p { color: #00f; }
</style>
<script type="text/javascript">
var x = 0; var tid1;
function setOpacity() {
	try {
		var isMSIE = /*@cc_on!@*/false;
		var fi = isMSIE ? x * 100: x;
		var fo = isMSIE ? 100 - x * 100: (1 - x);
		var elm1 = document.getElementById('opa1');
		var elm2 = document.getElementById('opa2');
		if (isMSIE) {
			//IE
			elm1.style.filter = 'alpha(opacity=' + fi + ')';
			elm2.style.filter = 'alpha(opacity=' + fo + ')';
			
		} else {
			if (elm1.style.MozOpacity) {
				//Firefox2以前?
				elm1.style.MozOpacity = fi;
				elm2.style.MozOpacity = fo;
			} else {
				//Firefox3、Safari、Opeara
				elm1.style.opacity = fi;
				elm2.style.opacity = fo;
			}
		}
		x = x + .01;
		if (x > 1) { clearTimeout(tid); return; }
		tid = setTimeout(setOpacity, 10);
	} catch(e) { ; }
}
window.onload = function() { setOpacity(); }
</script>
<title>Opacity Test</title>
</head>
<body>
<div id="opa1">
	<p>この箱がだんだん濃くなっていくよ</p>
</div>
<br>
<div id="opa2">
	<p>逆にこっちは薄くなってくよ</p>
</div>
</body>
</html>
参考サイト

http://www.tagindex.com/kakolog/q4bbs/901/1127.html
方法的には、cssのopacity値をjavascriptで増やしたり、減らしたりと至って簡単。
ブラウザ分岐の部分が我ながら怪しい気がしなくもないが、エラーをトラップしてるんでokか!?(汗

サンプル

こんな感じになります。

まとめ

これまで透明度弄ったりするのは敢えてやらなかったんだけど、いざやってみると
何気に面白かったので、エフェクト系で面白いブックマークレットとかグリモン作れないか考えてみようかな。