要素に影を付けられるjQueryプラグイン「shadowOn」

最近ではCSS3で、テキストとかボックスなどの要素に影を付けられるようになりましたよね。
参考）ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応 - builder by ZDNet Japan
CSS3だとあれなので、JavaScriptでやりましょうか。というjQueryプラグイン「shadowOn」。

使用方法

shadowOnからファイル一式をダウンロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.guid.js"></script>
<script type="text/javascript" src="jquery.dotimeout.js"></script>
<script type="text/javascript" src="jquery.shadowon.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#id名").shadowOn({
		imagepath: "img", //画像フォルダをアップしたところ
		imageset: '5' //画像番号
	});
});
</script>

というわけでPNG画像で表示をしておりますので、IE6非対応。。
あとは上記IDに対応した要素を記述すれば完成です。
どんな種類があるかはこちらを御覧ください。


<div id="id名"></div>

サンプル

Javascriptサンプルページ一覧

skuare.net