如何使用JQuery的turn.js库来实现翻书效果

这篇文章主要介绍“如何使用JQuery的turn.js库来实现翻书效果”，在日常操作中，相信很多人在如何使用JQuery的turn.js库来实现翻书效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用JQuery的turn.js库来实现翻书效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联专注于五寨企业网站建设,响应式网站,商城网站开发。五寨网站建设公司,为五寨等地区提供建站服务。全流程按需定制开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

实现效果如下

官方示例代码：

html:

    Turn.js 
    
   
 第1页 
   
 第2页 < / div>
   
 第3页 
   
 第4页 
    
    

js:

• 第一步：记得要先引入JQ文件（1.3或更高版本才可以哦~~）

• 第二步：引入turn.js文件，可以到官网下载

• 第三步：接下来就可以用咱们的主角turn.js啦~~代码如下↓↓↓

 
 $（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
 

注：class为hard的可理解为一本书的（首末）封皮

• 特征

✓适用于iPad和iPhone。
✓简单，美观且功能强大的API。
✓允许通过Ajax请求动态加载页面。
✓纯HTML5 / CSS3内容。
✓两个过渡效果。
✓可在带有turn.html4.js的IE 8等旧浏览器中使用

• 要求

jQuery 1.3或更高版本。
浏览器支持
Safari 5镀铬16Firefox 10IE 10、9、8
设备
✓所有iOS（iPad，iPhone，iPod）
✓安卓（Chrome for Android）

• 改进措施

Turn.js 4在其核心上进行了一系列重要的性能改进。
✓现在，在浏览器平台上效果更加流畅。
✓无论页面大小如何，新的DOM组成都保证了相同的性能。

• 补体

turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新缩放功能，请参阅示例。
剪刀.js-为turn.js分为两部分。
hash.js-使用pushState和URI散列控制导航历史记录。

• API文档

turn.js API方便地构建为jQuery的UI插件，它提供对一组功能的访问，并允许您定义用户交互。
完整的文档可在此处获得，也可以PDF格式获得。

Options

• acceleration 加速

• autoCenter 自动居中

• direction 方向

• display 显示

• duration 持续时间

• gradients 渐变

• height 高度

• elevation

• page 页

• pages 页数

• turnCorners

• when 执行函数

• width 宽度

• zoom 放大缩小

Properties

• animating 动画

• direction 方向

• display 显示

• disabled 禁用

• page 页

• pages 页数

• size 大小

• options

• view 视图

• zoom 放大缩小

Methods 方法

• addPage

• center

• destroy

• direction

• display

• disable

• hasPage

• next

• is

• page

• pages

• peel

• previous

• range

• removePage

• resize

• size

• stop

• version

• zoom

Events 事件

• end

• first

• last

• missing

• start

• turning

• turned

• zooming

CSS Classes class类

• .even

• .fixed

• .hard

• .odd

• .own-size

• .page

• .p[0-9]+

• .shadow

• .sheet

附录demo 代码

demo && 代码如下：