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. vue 之 介绍及简单使用

    浏览目录 vue的介绍 vue的使用 vue的介绍 简介 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底 ...

  2. 远程桌面--------ms12-020 漏洞复现 （死亡蓝屏）

    漏洞名:MS12-020(全称:Microsoft windows远程桌面协议RDP远程代码执行漏洞) 介绍:RDP协议是一个多通道的协议,让用户连上提供微软终端机服务的电脑. windows在处理某 ...

  3. java 抽象方法

    int 是基本数据类型Integer是其包装类,注意是一个类.为什么要提供包装类呢???一是为了在各种类型间转化,通过各种方法的调用.否则 你无法直接通过变量转化.比如,现在int要转为Stringi ...

  4. easyui 展开缩起

    1.引用jquery-easyui-1.4.4/datagrid-detailview 2.增加属性 view: detailview, detailFormatter: function (rowI ...

  5. gRPC官方文档(概览)

    文章来自gRPC 官方文档中文版 概览 开始 欢迎进入 gRPC 的开发文档,gRPC 一开始由 google 开发,是一款语言中立.平台中立.开源的远程过程调用(RPC)系统. 本文档通过快速概述和 ...

  6. Ubuntu - 安装hadoop（简约版）

    相关版本: VMware ubuntuKylin16.04 JDK :openjdk Hadoop-2.9.1 步骤: 1.SSH 配置 [ 远程登陆 ] [ 配置SSH免码登陆 ] *测试:ssh ...

  7. Mysql union

    union简单来说就是多表链接,主要是用于(模糊)查询,全库搜索 多表搜索需要先将需要查询的表用union连接,然后在每一个union后面添加上相同的where条件 菜鸟教程

  8. Python中logging模块的基本用法

    在 PyCon 2018 上,Mario Corchero 介绍了在开发过程中如何更方便轻松地记录日志的流程. 整个演讲的内容包括: 为什么日志记录非常重要 日志记录的流程是怎样的 怎样来进行日志记录 ...

  9. Cannot find module 'webpack/bin/config-yargs'

    1.版本不兼容 npm install webpack-dev-server@1.15.0 -g

  10. Spring IOC机制之使用注解配置bean

    一. 通过注解配置bean 1.1       概述 相对于XML方式而言,通过注解的方式配置bean更加简洁和优雅,而且和MVC组件化开发的理念十分契合,是开发中常用的使用方式. 1.2       ...