スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」

スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」サンプル 本をめくるような表現を付けられるJavaScriptです。
FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。

使用方法 FlipPage: Tournez les pages sur votre iPad !からファイルをダウンロード。
<link rel="stylesheet" href="jquery.flippage.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.flippage.js"></script>
<script type="text/javascript">
$(function() {
$('.class名').flippage({
width: 450, // 幅
height: 230 // 高さ
});
});
</script>

あとは画像を記述していきます。
<div class="class名">
<div><img src="画像パス1" style="margin-left: 0px;" /></div>
<div><img src="画像パス1" style="margin-left: -225px;" /></div>
<!-- 画像幅の半分をネガティブマージンさせます。 -->
<div><img src="画像パス2" style="margin-left: 0px;" /></div>
<div><img src="画像パス2" style="margin-left: -225px;" /></div>
<!-- 以下画像分 -->
</div>

ネガティブマージンがいけてないですが、divなどの要素の切り替えであれば、1個の記述で問題ありません。

スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」サンプル

sponsors

「スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」」をシェアする

記事作成:
記事URL:

TOP > > スマートフォンも対応!本をめくるような表現ができるJavaScript「FlipPage」