利用 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的方法相近.$('#pages').turn(); $('#pages').checkPosition().addDirectionNav().addShadow();
来自:http://blog.csdn.net/jiancm2001/article/details/7246010