利用 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) { });

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

但和turnjs首页的功能相比不够完善.

所以自己又写了个小包,增加了一点功能和效果.

html代码方面的布局有一点改变,

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

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

一共有3个方法:

addDirectionNav() : 添加翻书按钮.
addShadow() : 添加阴影效果.
checkPosition() : 检查图书位置,保持居中.

方法和trunjs的方法相近.

[javascript] view plain copy print ?

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