turn.js实现翻书效果

参考链接:

http://www.turnjs.com/


步骤:

1.html布局

turn.js实现翻书效果_第1张图片

2.引用js

turn.js实现翻书效果_第2张图片
注意:这个放在html最下面或者js最后面

3.jquery 默认翻书效果

turn.js实现翻书效果_第3张图片
注意:监听事件里面可以放可以放很多函数,turning(翻页开始的时候触发),turned(翻页结束的时候触发),last(最后一页触发)

我在做翻页的时候遇到一个问题,就是在提交表单的时候,select选中会触发左右翻书事件,所以form表单提交的时候要禁止滑动,其实很简单一个东西,但是我看了很多有关turn.js的文章,大家都没有解释清楚,后来直接找英文官网,只要一句话搞定:

$(".flipbook").turn("disable", true);//禁用滑动

鉴于本人很懒,其余的代码网上都有,所以就不一一复制了。

你可能感兴趣的:(turn.js实现翻书效果)