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. Luogu 4552 [Poetize6] IncDec Sequence

    在BZOJ上好像被权限掉了. 考虑差分,定义差分数组$b$ $$b_i = \left\{\begin{matrix} a_i \ \ \ (i == 1)\\ a_i - a_{i - 1}\ \ ...

  2. int类型转换成String ， 不足n位 在前面补0

    1.String.format("%02d", 5);-->结果:05 0代表前面要补的字符 2代表字符串长度 d表示参数为整数类型 2.秒转换成时分秒 private St ...

  3. 《网络攻防》 第十二周作业 SQL注入

    SQL注入实践 1.打开seed虚拟机,使用命令sudo service apache2 start启动apache,发现一条提示,意思就是不能可靠地确定域名,如图 即使右下角标着OK,但我还是不放心 ...

  4. meteor 命令文件shell 解析

    #!/bin/bash # This is the script that we install somewhere in your $PATH (as "meteor")# wh ...

  5. MVC中使用代码创建数据库（code first +mysql+EF）

    1.新建一个mvc项目 2.安装mysql需要的几个文件 EntityFramework.MySql.Data(6.9.12)和MySql.Data.Entity (6.9.12) 这里有几点要注意 ...

  6. jQuery 插件开发——countdown（倒计时）

    故事背景:按照惯例,先写下故事背景,其实也是再次汇报下最近开发情况的.做电商的都知道,这是个活动季啊,双十一.双十二.元旦....各种啊..其实说这么多就是想表达最近比较忙.呵呵^_^,正好今天抽点空 ...

  7. 水平居中的那些事之解决jqpagination分页插件无法居中的问题

    固定宽度的元素水平居中只需要 margin-left:auto: margin-right:auto; 换成 margin:0 auto; 也是一样的 今天给我用的jqPagination分页插件实现 ...

  8. python 全局搜索路径

    在~/.bachrc中添加 export PYTHONPATH=$PATHONPATH:[需要添加的路径]

  9. Sqlserver根据某字段分隔符将一条记录拆分为多行记录

    参考地址:http://blog.sina.com.cn/s/blog_b3eabfd30102wldv.html 参考语句: if object_id('[aaa]') is not null dr ...

  10. Android按钮单击事件处理的几种方法（Android学习笔记）

    方法一:匿名内部类实现按钮事件处理 this.btnButton=(Button)super.findViewById(R.id.mybtn); this.btnButton.setOnClickLi ...