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

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

Check Tweet

配布元：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 」では次のようなオプションをとる事ができます。

また、作者のサイトではこのプラグインの実装テクニックについて解説されています。The Secret Behind the Page Flip Technique

スポンサードリンク

コメント

カテゴリー：iPad iPhone jQuery ライブラリ 画像

直前:ソースコードをハイライト表示する「SyntaxHighlighter」

直後:シンプルなカラーピッカー「the jQuery Color Picker」