本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」
読み物っぽい画像を切り替えるとき、本をめくるように切り替えられたらイメージがわかりやすくなります。
jQueryライブラリのmLivreを利用すると擬似的に実現可能です。
使用方法
mLivreからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.mLivre.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id名').mLivre({
width:450, //幅
height:230, //高さ
dossier:'/img/' //切り替えの影などを置いた画像ディレクトリ
});
})
</script>
あとは表示させたい場所に画像を記述すれば完成です。
<div id="id名">
<img src="画像1" width="450" height="230" />
<img src="画像2" width="450" height="230" />
<!-- 以下画像分 -->
</div>
画像は真ん中でわかれてた方がオススメです。
本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」サンプル
コメントする
記事作成：2011年7月12日 10:09
