利用 turnjs 做的相簿效果.

turnjs 是一個基于HTML5和jQuery實現模擬真實翻頁效果的庫.

翻頁的效果做得很出色,并且:

   +支持硬件加速

   +支持跨平臺

   +使用簡單

   +體積僅15k

下載地址:

壓縮版:http://www.turnjs.com/turn.min.js

完整版:https://github.com/blasten/turn.js

順便送上使用說明

---------------------------------------------------------------------------------------------

構造函數:

$('selector').turn([options]);

options

• page (type: number, default: 1)

• shadows (type: boolean, default: true)

• duration (type: number, default: 600)

• acceleration (type: boolean, default: true)

Example: $('selector').turn({page:1, acceleration:false});

Page:(返回當前第幾頁)

Gets the current page.

Example: alert($('selector').turn('page'));

view:(返回數組,數組存放當前顯示兩頁的頁碼,如果沒有,則為0)

Gets the current view. A view is basically an array of two values, in which the key [0] is the left page and [1] the right page. Cases where there is only one page, the value will be zero.

Example: alert($('selector').turn('view'));

方法:

page:(跳到到指定頁數)

Example: $('selector').turn('page', 2);

next:(跳到下一頁)

Example: $('selector').turn('next');

previous:(跳到上一頁)

Example: $('selector').turn('previous');

stop:(停止當前的翻頁效果)

Example: $('selector').turn('next').turn('stop');

resize:(Resets the size of all the wrappers used by turn)    PS:這個一直搞不懂作用,翻查源碼也一頭霧水,求高人指點.

Example: $('selector').turn('resize');

disable:(關閉所有動畫效果)

Example: $('selector').turn('disable', true);

事件:

turning:(開始翻頁時觸發)

Example: $('selector').bind('turning', function(e, page) { console.log(page+' says bye...'); });

turned:(翻頁結束后觸發)

Fired when a page has been turned.

Example: $('selector').bind('turned', function(e, page, pageObj) { alert('Page turned to '+page); });

start:(頁面正常顯示后觸發)

Example: $('selector').bind('start', function(e, turn) { console.log('Is it turning?' + turn); });

end:(折疊效果的圖層隱藏時觸發)

Example: $('selector').bind('end', function(e) { });

---------------------------------------------------------------------------------------------

所以自己又寫了個小包,增加了一點功能和效果.

html代碼方面的布局有一點改變,

具體可以去下面地址查看.

Demo:http://maplejan.com/codelaboratory/code/html5/album

一共有3個方法:

addDirectionNav() : 添加翻書按鈕.
addShadow() : 添加陰影效果.
checkPosition() : 檢查圖書位置,保持居中.

方法和trunjs的方法相近.

$('#pages').turn();  
$('#pages').checkPosition().addDirectionNav().addShadow();