幫助你生成翻頁效果的jQuery插件 - bookblock
日期：2012-9-18 來源：GBin1.com
今天我們介紹一個漂亮的jQuery翻頁效果插件 - bookblock，使用它可以創建動態的類似書本翻頁效果的幻燈。希望大家喜歡！
這個插件依賴于jQuery++，這個類庫是一個jQuery的擴展類庫，這里使用了它的swipe事件。
HTML代碼
主要html代碼如下，生成需要展示的圖片內容：
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<a ><img src="images/animals/a.jpg" alt="image01"/></a>
</div>
<div class="bb-item">
<a ><img src="images/animals/b.jpg" alt="image02"/></a>
</div>
<div class="bb-item">
<a ><img src="images/animals/c.jpg" alt="image03"/></a>
</div>
<div class="bb-item">
<a ><img src="images/animals/d.jpg" alt="image04"/></a>
</div>
<div class="bb-item">
<a ><img src="images/animals/e.jpg" alt="image05"/></a>
</div>
<div class="bb-item">
<a ><img src="images/animals/f.jpg" alt="image05"/></a>
</div>
</div> Javacript代碼
$(function() {
var Page = (function() {
var config = {
$bookBlock: $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navJump : $( '#bb-nav-jump' ),
bb : $( '#bb-bookblock' ).bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} )
},
init = function() {
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children(),
totalSlides = $slides.length;
// add navigation events
config.$navNext.on( 'click', function() {
config.bb.next();
return false;
} );
config.$navPrev.on( 'click', function() {
config.bb.prev();
return false;
} );
config.$navJump.on( 'click', function() {
config.bb.jump( totalSlides );
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.bb.next();
return false;
},
'swiperight' : function( event ) {
config.bb.prev();
return false;
}
} );
};
return { init : init };
})();
Page.init();
}); 主要參數
主要參數如下：
// speed for the flip transition in ms.
speed : 1000,
// easing for the flip transition.
easing : 'ease-in-out',
// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows : true,
// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides : 0.2,
// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip : 0.1,
// perspective value
perspective : 1300,
// if we should show the first item after reaching the end.
circular : false,
// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl : '',
// if we want to specify a selector that triggers the prev() function.
prevEl : '',
// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip : function( page, isLimit ) { return false; },
// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }
希望大家喜歡這個插件，如果你有任何問題，請給我們留言，謝謝！
來源：幫助你生成翻頁效果的jQuery插件 - bookblock