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. 关于 node-sass 安装失败的问题

    最近换了一台计算机,使用ionic+cordova 开发,过程中发现node-sass 总是安装失败,经过搜索之后,发现可能是由于国内被墙导致的,找到了解决办法记录一下: 使用taobao 的镜像,成 ...

  2. .net core 基于NPOI 的excel导入导出类，支持自定义导出哪些字段，和判断导入是否有失败的记录

    #region 从Excel导入 //用法 //var cellHeader = new Dictionary<string, string>(); //cellHeader.Add(&q ...

  3. 字符串创建XML文档

    创建XML文档,方法与形式是多样的,下面Insus.NET再例举两种,可供参考. XmlDocument(namespace:System.Xml)在实例化之后,它有一个方法LoadXml(),可以把 ...

  4. Github加载慢，显示不完整问题解决

    问题: 在访问Github网站的时候,可能会遇到网站响应超时,图片加载不出,排版错误等情况(大部分情况下是可以正常打开的). 解决方法: 修改 C:\Windows\System32\drivers\ ...

  5. loj #2007. 「SCOI2015」国旗计划

    #2007. 「SCOI2015」国旗计划   题目描述 A 国正在开展一项伟大的计划 —— 国旗计划.这项计划的内容是边防战士手举国旗环绕边境线奔袭一圈.这项计划需要多名边防战士以接力的形式共同完成 ...

  6. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

  7. Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre

    原文链接:https://blog.csdn.net/hq091117/article/details/79065199 https://blog.csdn.net/allen_tsang/artic ...

  8. List集合分页

    原文链接:https://www.cnblogs.com/haiyangsvs/p/6210852.html import java.util.Arrays; import java.util.Col ...

  9. 平衡树学习笔记（2）-------Treap

    Treap 上一篇:平衡树学习笔记(1)-------简介 Treap是一个玄学的平衡树 为什么说它玄学呢? 还记得上一节说过每个平衡树都有自己的平衡方式吗? 没错,它平衡的方式是......rand ...

  10. jupyter notebook 设置默认目录

    1.打开 cmd 输入命令 jupyter notebook --generate-config 可以看到生成文件的路径,这个就是生成的配置文件jupyter_notebook_config.py, ...