Turn.js的官方网址: http://www.turnjs.com/

官网上运行demo如下，大家主要关注是 属性使用：

<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

<div class="flipbook-viewport">

  <div class="container">

    <div class="flipbook">

      <div>1111111111111</div>

      <div>2222222222222</div>

      <div>3333333333333</div>

      <div>4444444444444</div>

      <div>5555555555555</div>

      <div>6666666666666</div>

      <div>7777777777777</div>

      <div>8888888888888</div>

      <div>9999999777999</div>

    </div>

  </div>

</div>

<script type="text/javascript">

  function loadApp() {

    // Create the flipbook

    $('.flipbook').turn({

      // Width

      width: 922,

      // Height

      height: 600,

      // Elevation

      elevation: 50,

      // Enable gradients

      gradients: true,

      // Auto center this flipbook

      autoCenter: true

    });

  }

  // Load the HTML4 version if there's not CSS transform

  yepnope({

    test: Modernizr.csstransforms,

    yep: ['turn.js'],

    both: ['basic.css'],

    complete: loadApp

  });

</script>

</body>

</html>

属性使用：

display: 'single'    显示单页  默认是双页
when: function(){  // 事件监听 
 turning: function(event, page, view){
   alert(page)
 },
 turned: function(){}
}

可以设置上一页  及 下一页 跳转指定页
// Turn to the page 10

$("#flipbook").turn("page", 10);
 

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实现翻书效果

    前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...

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

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

  5. turn.js 图书翻页效果

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

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

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

  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. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

随机推荐

  1. BMP是可以保存alpha通道的。

    一直以来都不太熟悉BMP格式,今天保存图片的时候发现bmp是可以保存透明通道的,突然想起来以前下载的一些游戏素材贴图里面就有一些bmp格式的贴图.记录一下.

  2. Java-马士兵设计模式学习笔记-策略模式-模拟 Comparator接口

    续上一篇  <Java 模拟 Comparable接口> 一.Teacher类及Student类的比较大小方式是不固定的,比如老师除了比较职称外,还可比较工龄大小,年龄大小等.则定义Com ...

  3. Effective Objective-C [上]

    网上看到的 http://esoftmobile.com/2013/08/10/effective-objective-c/ 本文是针对<Effective Objective-C>一书的 ...

  4. String的字符串相加是怎么实现的？

    http://bbs.csdn.net/topics/60485130 首先看 String str = "a" + "b" + "c"; ...

  5. About English Web Site Font

    Which font will you choose when develop one website! Actually , I have no idea about this! If you ha ...

  6. 抽象类（abstract）【转】

    抽象类(abstract) abstract修饰符可以和类.方法.属性.索引器及事件一起使用.在类声明中使用abstract修饰符以指示某个类只能是其它类的基类.标记为抽象或包含在抽象类中的成员必须通 ...

  7. json序列化.xml序列化.图片转base64.base64转图片.生成缩略图.IEnumerable<TResult> Select<TSource, TResult>做数据转换的五种方式

     JSON序列化 /// <summary> /// JSON序列化 /// </summary> public static class SPDBJsonConvert { ...

  8. Web Api 测试工具

    1.调用POST方法:使用Chrome流量器的PostMan工具. 前端模拟发送数据/调试的好工具:Chrome下的Postman-REST Client 下载地址 https://chrome.go ...

  9. 源码方式安装rabbitmq

    由于工作环境中属于内网,yum安装方式不可用,所以需要采用源码进行rabbitmq的安装.rabbitmq是基于erlang环境进行运行的,所以需要先按照erlang环境,才能运行rabbitmq-s ...

  10. MongoDB初识篇

    前言 一直听说MongonDB,却没有机会接触它,于是决定先从表面上认识它.MongoDB(分布式文档存储数据库)是一种介于关系型数据库和非关系型数据库之间的数据库,而且它是非关系数据库中最像关系型数 ...