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. rest-framework组件 之 认证与权限组件

    浏览目录 认证组件 权限组件 频率组件 认证与权限组件 认证组件 局部视图认证 在app01.service.auth.py: class Authentication(BaseAuthenticat ...

  2. Linux之tcpdump使用详解

    1.1  三种关键字 关于类型的关键字 第一种是关于类型的关键字,主要包括host,net,port, 例如 host 210.27.48.2,指明 210.27.48.2是一台主机,net 202. ...

  3. Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

    1.概述 关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向 ...

  4. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

    Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...

  5. 2013年第四届蓝桥杯国赛 九宫重排（HashMap+双BFS优化）

    九宫重排     时间限制:1.0s   内存限制:256.0MB 问题描述 如下面第一个图的九宫格中,放着 1~8 的数字卡片,还有一个格子空着.与空格子相邻的格子中的卡片可以移动到空格中.经过若干 ...

  6. Java50道经典习题-程序36 移动位置

    题目:有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数 分析:比如有4个数n=4; 1 2 3 4 各个数向后移动2位m=2,变为 1 2 3 4 将最后m个数,即将最后2个数 ...

  7. c#设计模式-单例模式【转】

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题 public class Singleton { private static Singleton _instance = ...

  8. Android camera调用出现错误解决方法

    开发时,先是使用三星的手机测试,发现一切正常: 但是到了小米的手机的时候,发现图片很模糊,发现是设置camera.setParameters(parameters);报错导致用的是默认的最小的分辨率, ...

  9. The King’s Problem 强连通

    题意  有n个城市 m条有向边 将n个城市分成几个州 1.强连通必定在一个州里 2.州里的任意两个城市  u,v     满足u到v 或者v到u  其一即可 先缩点  然后求最小路就覆盖 #inclu ...

  10. ubuntu - 14.04，必须会的技能-安装PPA源中的程序，更大范围使用deb格式安装文件！！

    在使用ubuntu时候,管理各种软件最方便的方式肯定是使用软件中心了,这个管理工具类似windows的 程序管理了,使用它有两个好处: 1,无需处理包依赖,linux里面程序存在各种依赖关系,这在以往 ...