アイデア勝ち！JavaScriptでビフォーアフター「jQuery Before/After Plugin」

これはアイデアがいいですね。
JavaScriptライブラリjQueryで使用前・使用後みたいな表現が可能になります。
via：jQuery Before/After Plugin

sponsors

使用方法

jQuery Before/After Pluginから関連ファイルをダウンロードします。
また、jQueryからjquery.jsをjQuery UIからjquery.ui.jsをダウンロードします。
※画像はjsにて絶対パスで指定されているので、適宜修正ください。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui.1.7.1.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#id名').beforeAfter();
});
</script>
あとは画像を書けば完成です。

<div id="demo">
	<div><img alt="before" src="before.jpg" width="393" height="595" /></div>
	<div><img alt="after" src="after.jpg" width="393" height="595" /></div>
</div>
※画像は同サイズにて作成し、サイズを明記して下さい。
【オプション】

<script type="text/javascript">
$(function(){
	$('#id名').beforeAfter({
		animateIntro : true, //初期アニメーション
	        introDelay : 200, //アニメーションディレイ
	        introDuration : 500, //アニメーション速度
    		showFullLinks : false  //before/afterリンクをつけない
	});
});
</script>

サンプル

before
after
Javascriptサンプルページ一覧
skuare.net

sponsors