【ねとWeb】-アフィリエイト生活に27歳で挑戦中-

本をめくるような表現ができるJavaScript「FlipPage」

2013年11月17日  カテゴリー:JavaScript

  • このエントリーをはてなブックマークに追加

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


==============================
<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>
==============================

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

 


JavaScriptの関連する記事