html局部翻页效果,基于Turn.js 实现翻书效果实例解析

最近项目经理我个项目练练手，其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，之前他曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。下面小编把我的学习心得分享给大家，大家可以参考下

下面是我这个项目上线后的效果：

看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：

1、需要引入的脚本文件

2、html部分代码

Turn.js 实现翻书效果

//自定义仿iphone弹出层

(function ($) {

//ios confirm box

jQuery.fn.confirm = function (title, option, okCall, cancelCall) {

var defaults = {

title: null, //what text

cancelText: '取消', //the cancel btn text

okText: '确定' //the ok btn text

};

if (undefined === option) {

option = {};

}

if ('function' != typeof okCall) {

okCall = $.noop;

}

if ('function' != typeof cancelCall) {

cancelCall = $.noop;

}

var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

var $dom = $(this);

var dom = $('

');

var dom = $('

').appendTo(dom);

var dom_content = $('

').html(o.title).appendTo(dom);

var dom_btn = $('

').appendTo(dom);

var btn_cancel = $('').html(o.cancelText).appendTo(dom_btn);

var btn_ok = $('').html(o.okText).appendTo(dom_btn);

btn_cancel.on('click', function (e) {

o.cancelCall();

dom.remove();

e.preventDefault();

});

btn_ok.on('click', function (e) {

o.okCall();

d