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

これはアイデアがいいですね。
JavaScriptライブラリjQueryで使用前・使用後みたいな表現が可能になります。
via:jQuery Before/After Plugin
アイデア勝ち!JavaScriptでビフォーアフター「jQuery Before/After Plugin」

使用方法
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>

アイデア勝ち!JavaScriptでビフォーアフター「jQuery Before/After Plugin」サンプル

sponsors

「アイデア勝ち!JavaScriptでビフォーアフター「jQuery Before/After Plugin」」をシェアする

記事作成:
記事URL:

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