本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」

本をめくるようなエフェクトで画像を切り替える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」サンプル

sponsors

「本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」」をシェアする

記事作成:
記事URL:

TOP > > 本をめくるようなエフェクトで画像を切り替えるJavaScript「mLivre」