前言：

hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js，下面我先来简单介绍下我们今天的主角turn.js。

Turn.js是一个JavaScript库，它集合了HTML5的所有优点，可以使我们的内容看起来像一本书或杂志，有真实的翻阅的效果。

它使用HTML5和CSS3来执行效果，所以它可以在iOS设备（iPad，iPhone，iPod）和Android设备等触摸设备上很好地工作~
Turn.js具有比Flash内容拥有真实HTML内容的所有优势，除了感觉到本机内容（可选内容，没有第三方上下文菜单）之外，还可以添加广告代码，HTML5视频，工具提示，图像，地图，表单，跟踪每个页面并将它们与数百个精巧的库组合在一起用于网络。

***本文关键词：turn.js属性值，用法，demo代码（见附录，在文章最后哦~~）。

实现效果如下（静态图）

官方示例代码：
html:

 <div id = “ flipbook” >

    <div class = “ hard” > Turn.js </ div>

    <div class = “ hard” > </ div>

    <div> 第1页 </ div>

    <div> 第2页 < / div>

    <div> 第3页 </ div>

    <div> 第4页 </ div>

    <div class = “ hard” > </ div>

    <div class = “ hard” > </ div>

 </ div>

js:
第一步：记得要先引入JQ文件（1.3或更高版本才可以哦~~）
第二步：引入turn.js文件，可以到官网下载（官方地址：http://www.turnjs.com/）
第三步：接下来就可以用咱们的主角turn.js啦~~代码如下↓↓↓

 <script type = “ text / javascript” >

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

 </ script>

注：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 && 代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             #flipbook div {

                 text-align: center;

                 line-height: 500px;

             }

             .backward,

             .forward{

                 width: 40px;

                 height: 40px;

             }

         </style>

     </head>

     <body>

         <!-- 官方示例代码 -->

         <!-- <div id="flipbook">

             <div class="hard">  Turn.js  </div>

             <div class="hard"> </div>

             <div>  第1页 </div>

             <div>  第2页 </div>

             <div>  第3页 </div>

             <div>  第4页 </div>

             <div class="hard"> </div>

             <div class="hard"> </div>

         </div> -->

         <div id="flipbook">

           <div style="background: pink;" class="hard"> </div>

           <div style="background: olivedrab;" class="hard"> </div>

           <div style="background: palegoldenrod;"> Page 1 </div>

           <div style="background: paleturquoise;"> Page 2 </div>

           <div style="background: plum;"> Page 3 </div>

           <div style="background: mediumaquamarine;"> Page 4 </div>

           <div style="background: greenyellow;"> Page 5 </div>

           <div style="background: darkkhaki;"> Page 6 </div>

           <div style="background: aqua;" class="hard"> </div>

           <div style="background: teal;" class="hard"> </div>

         </div>

         <!-- 前一页 -->

         <img src="img/backward.png" class="backward" onclick="backwardPage()">

         <!-- 后一页 -->

         <img src="img/forward.png" class="forward" onclick="forwarPage()">

     </body>

     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

     <script type="text/javascript" src="js/turn.min.js"></script>

     <script>

         $("#flipbook").turn({

           width: 600,

           height: 500,

           // acceleration: true, // 是否加速，对于触摸屏的设备，这个值必须为true

           // autoCenter: true, // 是否居中 默认值false

           // direction: "ltr", // 翻书方向，值为rtl / ltr（3种写法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }

           display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)

         });

         function backwardPage() {

             $("#flipbook").turn("previous");

         }

         function forwarPage() {

             $("#flipbook").turn("next");

         }

     </script>

 </html>

demo如下：

按钮图片：

 

。。。。。。END。。。。。。希望可以帮到你~~~

作者：夕照希望
出处：http://www.cnblogs.com/hope666/ 

JQuery的turn.js实现翻书效果的更多相关文章

  1. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  2. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  3. jQuery中turn.js（翻页效果）学习笔记

    Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...

  4. Turn.js 实现翻书效果

    Turn.js的官方网址: http://www.turnjs.com/ 官网上运行demo如下,大家主要关注是 属性使用: <!DOCTYPE html> <html> &l ...

  5. Turn.js 实现翻书效果(自适应单双页)

    来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...

  6. turn.js 图书翻页效果

    今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 三 个地方要改动: 1.后台查出地址 注意的地方:1.地址要 ...

  7. 静态书架和js模拟翻书效果

    书籍图片随便找了个,有点难看,须要的自己替换个好看点的png格式图片 源代码下载:http://download.csdn.net/detail/sweetsuzyhyf/7604091

  8. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  9. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

随机推荐

  1. bzoj4318OSU!*

    bzoj4318OSU! 题意: 一个长度为n的序列,每个元素有一定概率是1,不是1就是0.连续x个1可以贡献x^3的分数,问期望分数. 题解: 期望dp.f1[i]表示连续到i的期望长度,f2[i] ...

  2. python也能玩视频剪辑！moviepy操作记录总结

    前几篇文章咱们介绍了一下图片的处理方式,今天咱们说说视频的处理.python能够支持视频的处理么?当然是肯定的,人生苦读,我用python.万物皆可python. moviepy库安装 今天咱们需要使 ...

  3. 系统部署时的Could not load file or assembly 'Microsoft.VisualStudio.Enterprise.ASPNetHelper问题

    在web.config中,如下代码段 <compilation debug="true" targetFramework="4.0" assemblyPo ...

  4. webpack源码-依赖收集

    webpack源码-依赖收集 version:3.12.0 程序主要流程: 触发make钩子 Compilation.js 执行EntryOptionPlugin 中注册的make钩子 执行compi ...

  5. 云原生时代高性能Java框架—Quarkus（一）

    --- Quarkus&GraalVM介绍.创建并启动第一个项目 Quarkus系列博文 Quarkus&GraalVM介绍.创建并启动第一个项目 构建Quarkus本地镜像.容器化部 ...

  6. CUDA中关于C++特性的限制

    CUDA中关于C++特性的限制 CUDA官方文档中对C++语言的支持和限制,懒得每次看英文文档,自己尝试翻译一下(没有放lambda表达式的相关内容,太过于复杂,我选择不用).官方文档https:// ...

  7. 设计模式：prototype模式

    使用场景:在不能根据类创建对象的时候,根据已有的对象创建对象 不能根据类创建对象的情况: 创建一个类的对象时,需要根据多种对象来创建,创建的过程非常复杂 难以根据类生成对象 例子: class Pro ...

  8. 题解 洛谷 P3639 【[APIO2013]道路费用 】

    不难想到可以\(2^k\)去枚举\(k\)条新边的选择方案,然后加入原图中的边来使图连通,用当前方案的收益去更新答案,但是这样复杂度过不去. 可以先把\(k\)条新边都连上,然后再加入边权从小到大排序 ...

  9. pyhton 3.6 pip 出现 Fatal error in launcher: Unable to create process using 解决方法

    ERROR:Fatal error in launcher: Unable to create process using '"' 出现这个  打开  终端  输入 python36 -m ...

  10. Springboot（二）springboot之jsp支持

    参考恒宇少年的博客:https://www.jianshu.com/p/90a84c814d0c springboot内部对jsp的支持并不是特别理想,而springboot推荐的视图是Thymele ...