ページめくりを実装するjQueryプラグイン「jPageFlipper 」-JavaScript Library Archive

ページめくりを実装するjQueryプラグイン「jPageFlipper 」

配布元：jPageFlipper
ライセンス：MIT License

「jPageFlipper 」は画像のページめくりを実装する為のjQueryプラグインです。 HTML 5 canvasで開発されておりGoogle Chrome 4以上, Firefox 3.5以上, Safari 4以上, Opera とiPhone、 IPadなどで動作可能です。

利用方法

まずは、ｊＱｕｅｒｙ本体とjquery-vsdoc.js、jquery.pageFlipper.jsをhead要素などで読み込みます。

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript" src="javascripts/jquery.pageFlipper.js"></script>

HTMLはul/liのリスト型で作成、ul要素に「lstImages」、「imagesSource」を追加しておきます。

<ul id="lstImages" class="imagesSource">
	<li><img alt=" " src="images/photo1.jpg" /></li>
	<li><img alt=" " src="images/photo2.jpg" /></li>
	<li><img alt=" " src="images/photo3.jpg" /></li>
	<li><img alt=" " src="images/photo4.jpg" /></li>
	<li><img alt=" " src="images/photo5.jpg" /></li>
	<li><img alt=" " src="images/photo6.jpg" /></li>
</ul>

次のようなスクリプトでページングを実装します。

$(function(){
	$('#lstImages').pageFlipper({
		fps: 20,
		easing: 0.2,
		backgroundColor: '#CCC',
		pageWidth: 200,
		pageHeight: 200
	});
});

サンプル

「jPageFlipper 」では次のようなオプションをとる事ができます。

className	ul要素のclass名
pageWidth	１ページの横幅
pageHeight	１ページの高さ
easing	アニメーションのイージング
fps	アニメーションのフレーム数
defaultPageColor	デフォルトのページ色
backgroundColor	ＴOPページと最後のページの色
cornerSide	左サイトからの距離