sponsors
<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>
sponsors