簡単!本をめくるような表現を実現するjQueryプラグイン「Viewbook」

これは簡単に導入できてよさげなプラグインです。
本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。
また、オプションも色々あるので、オリジナルなコンテンツになりそうです。
簡単!本をめくるような表現を実現するjQueryプラグイン「Viewbook」サンプル

使用方法 Viewbook - jQuery Pluginからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.viewbook.1.0.0.js" type="text/javascript"></script>
<link href="jquery.viewbook.1.0.0.css" type="text/css" rel="stylesheet" />
<script>
$(function() {
$('#id名').viewbook();
});
</script>

あとはページ要素を以下のように記述すれば完成です。
<div id="id名">
<div class="vb-load">
<div>
1ページコンテンツ
</div>
<div>
2ページコンテンツ
</div>
<div>
3ページコンテンツ
</div>
<!-- 以下ページ分 -->
</div>
</div>

オプション
name: null, // ページタイトル設定
width: 600, // ページ幅
height: 400, // ページ高さ
speed: 1000, // 切り替えスピード
startingPage: 0, // 最初のページ
easing: 'easeInOutQuad', // 完了時のイージング
easeIn: 'easeInQuad', // 最初の半分のイージング
easeOut: 'easeOutQuad', // 後の半分のイージング
overlays: true, // オーバーレイ
tabs: true, // タブ
tabWidth: 60, // タブ幅
tabHeight: 20, // タブ高さ
arrows: false, // 矢印
cursor: 'pointer', // カーソル
next: null, // 次のページに進む要素
prev: null, // 前のページに進む要素
hash: false, // こんな感じにする設定: #/page/1 for page 1
keyboard: true, // キーボードで遷移できるようにする
pageNumbers: true, // ページ数を出すか
shadows: true, // シャドー入れる?
shadowTopFwdWidth: 166, // シャドー幅
shadowTopBackWidth: 166, // シャドー高さ
shadowBtmWidth: 50, // bottomのシャドー幅
before: function(){}, // コールバック
after: function(){} // コールバック
}

簡単!本をめくるような表現を実現するjQueryプラグイン「Viewbook」サンプル

sponsors

「簡単!本をめくるような表現を実現するjQueryプラグイン「Viewbook」」をシェアする

記事作成:
記事URL:

TOP > > > 簡単!本をめくるような表現を実現するjQueryプラグイン「Viewbook」