reflection.js:画像を反射させ半透明の影を表示できるJs



jpg画像に半透明の反転した影を表示させてみます。
(始めから影付きのjpg画像を表示作って表示させれば良いかもしれませんが)

1.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="reflection.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {
		img.reflect(options);
	});
});
</script>

2.HTMLの記述例

対象のimgタグにJavaScriptで指定したclass(reflect)を指定するだけです。

    <div align="center"><img src="i1.jpg" alt="影を表示させる画像" class="reflect" /></div>

reflection.js:画像を反射させ半透明の影を反転表示するデモ

ソース元:Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

後からチョットだけカッコ良くさせたい気分の時に
利用できそうな気がします。