利用 turnjs 做的相簿效果.

fmms 12年前

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的方法相近.

$('#pages').turn();    $('#pages').checkPosition().addDirectionNav().addShadow();
来自：http://blog.csdn.net/jiancm2001/article/details/7246010