JavaScript

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.

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

影 reflection.js 反射
RELATED POST