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

<div id="flipbook">

<div style="background-image:url(pages/01.jpg);"></div>

<div style="background-image:url(pages/02.jpg);"></div>

<div style="background-image:url(pages/03.jpg);"></div>

<div style="background-image:url(pages/04.jpg);"></div>

<div style="background-image:url(pages/05.jpg);"></div>

<div style="background-image:url(pages/06.jpg);"></div>

</div>

3 javascript 部分

 

if(b_ok){
var turnWidth = $('#cover').outerWidth(),
turnHeight = $('#cover').outerHeight();

$('.flipbook').turn({
width: turnWidth*2+20,
height: turnHeight,
elevation: 50,
gradients: true,
autoCenter: true,
display:'double',
when: { turning: function(event, page, pageObject) {

} }
});

}
4.可用选项、属性、方法、事件、css类
 选项:
(1)acceleration:设置硬件加速模式,对于触摸设备,此值必须为真。
   acceleration:true;
(2)direction:指定flipbook从左到右(DIR=ltr,默认值)或右向左(DIR=rtl)的方向。
  a.$("#flipbook").turn({
    direction:'rtl'
   })
  b.<div id="flipbook" dir="rtl"></div>
  c.#flipbook{
      direction:rtl
    }
(3)duration:设置翻页的速度 
  duration:600 如果设置为0 则不会产生翻页效(4) gradients:翻页过程中显示渐变和阴影
   gradients:true
(5) width:页面的宽度 height:页面的高度
    width:num height:num
(6) elevation:转换期间页面的高度
    elevation:0
(7) page:初始化时设置页面个数
   page:1
(8) pages:设置任意数量的页面。如果页面的数量大于#flipbook中元素的数量,使用addPage方法动态地添加这些页面。
    $("#flipbook").children().length()
(9) when:事件侦听器。键必须在事件列表中使用
    $("#flipbook").turn({
    when:{
      turned: function(e, page) {
        if(page==1){
        }
        if(page==2){
        }
      }
    }
  })
属性:
(1) animating:当折叠的页面显示时返回true,
  function isAnimating() {
    if ($("#flipbook").turn("animating")) {
      alert('Animating a page!');
    }
  }
  (2)direction: 返回当前翻页的方向
     $("#flipbook).turn("direction")
  (3)display:获取当前显示的是单页还是双页
     $("#flipbook).turn("display")
  (4)page:获取当前页面为第几页
     $("#flipbook).turn("page")
  (5)pages:获取总共有多少页
    $("#flipbook").turn("pages")
  (6)size:获取flipbook的高宽
    $("#flipbook").turn("size")  获取出有两个值 size.width 和 size.height
 方法:
  (1) addpage:将页面添加到flipbook中 
      例如插入第10页:
      element=$("<div />").html("loading");
   $("#flipbook").turn("addpagge",element,6)
   (2) destroy:删除所有页面
       $("#flipbook").turn("destroy").remove();
   (3) direction :设置flipbook 的方向
       $("#flipbook").turn("direciton","rtl")
   (4) display:设置单页还是双页
       $("#flipbook").turn("display","single")   
   (5) next 把视图转到下一个
       $("#flipbook").turn("next")
       $("#flipbook").turn("next").turn("next")
   (6) options:更改选项的值 
       $("#flipbook").turn("options",{display:"single",duration:})
   (7) page:跳到指定的页面
       $("#fllipbook").turn("page",6)
   (8) previous:转到前面的视图
      $("#flipbook").turn("previous")
   (9) removepage:删除指定的页面
       $("#flipbook").turn("removepage",6)
   (10) resize:重新计算页面的大小
      $("flipbook").turn("resize")
   (11) stop:停止当前的过渡
      $("#flipbook").turn("page",6).turn("stop")
   (12)version:获取当前发布的版本
   $("#flipbook").turn("version")
   (13)zoom:flipbook的缩放比例 
    $("#flipbook").turn("zoom",0.5) 例如当值为0.5时 缩小为原来的一半 当值为1时 则不改变大小
   事件:
   (1) end:事件在页面停止时触发
       $("#flipbook").bind("end",function(event,pageobject,turned){
      alert("turn.end:"+pageobject.page)
       })
  (2)first:当当前页面为1时触发此事件
       $("#flipbook").bind("first",function(event){
         alert("page1")
       })
     (3)last:当当前页面为最后一页时触发此事件
      $("#flipbook").bind("last",function(event){
      alert("page_last")
    })
      (4)missing:当当前范围需要某些页面时 触发此事件
    $("#flipbook").bind("missing",function(event,pages){
      for(var i=0;i<pages.length;i++){
        $(this).turn("addpage",$("<div/>"),pages[i])
      }
       })
      (10) addpage:将页面插入到flipbook
      element=$("<div/>").html("loading...")
           $("#flipbook").turn("addpage",element,10) 插入第10页
      (11) start:页面启动时触发
           $("#flipbook").bind("start",function(event,pageobject,corner){
        if(corner=="tl"||corner=="tr"){
           event.preventDefault();   
        }
           })
           当翻动左角和右角时,禁止启动动画
      (12)turning:翻页之前被启动
     $("#flipbook").bind("turning",function(event,page,view){
             alert("turning the page to"+page)
          })
         翻页之前 弹出即将翻开的是第几页
      (13)turned:翻页完成之后启动
          $("#flipbook").bind("turned",function(event,page,view){
      alert("page"+page)
          })
      (14)zooming:当缩放改变时触发此事件
      $("#flipbook").bind("zooming", function(event,  newZoomValue, currentZoomValue) {
          alert("New zoom: "+currentZoomValue);
      });

jQuery中turn.js(翻页效果)学习笔记的更多相关文章

  1. turn.js 图书翻页效果

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

  2. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  3. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. jQuery支持mobile的全屏水平横向翻页效果

    这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...

  5. Android平台中的三种翻页效果机器实现原理

    本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下:     实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...

  6. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  7. 纯css3写的仿真图书翻页效果

    对css3研究越深入,越觉得惊艳.css3说不上是万能的,但是它能实现的效果也超出了我的想象.它的高效率和动画效果的流畅性很多情况下能替代js的作用.个人习惯css3能实现的效果就不会用js,虽然在国 ...

  8. ajax翻页效果模仿yii框架

    ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html>  <html>  <head>  <title>ajax分页_w ...

  9. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

随机推荐

  1. 字典树(前缀树)-Java实现

    字典树 字典树是一种树形结构,优点是利用字符串的公共前缀来节约存储空间.在这提供一个自己写的Java实现,非常简洁. 根节点没有字符路径.除根节点外,每一个节点都被一个字符路径找到. 从根节点到某一节 ...

  2. linux centos 7.5下 源码编译安装 lua环境

    lua 5.3.5 下载安装时发现缺少库 readline 需要添加依赖 yum search readline 看有哪些包 安装带有 devel 字样的 安装无 devel 的非开发包,通常不会自动 ...

  3. js(window.open)浏览器弹框居中显示

    <span style="background-color: rgb(204, 204, 204);"><html> <meta name=" ...

  4. linux下10款markdown软件

    原文:https://linux.cn/article-7623-1.html 在这篇文章中,我们会点评一些可以在 Linux 上安装使用的最好的 Markdown 编辑器. 你可以在 Linux 平 ...

  5. 封装一个统一返回json结果类JsonResult

    import java.io.Serializable; public class JsonResult implements Serializable{ private static final l ...

  6. P1441 砝码称重

    题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 输入输出格式 输入格式: 输入文件weight.in的第1行为有两个整数n ...

  7. iOS 基础函数解析 - Foundation Functions Reference

    iOS 基础函数解析 - Foundation Functions Reference 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名- ...

  8. package.json常用的字段

    package.json中5个字段: name: 包名 今后下载时输入名称 (注意:要与下载的包名不一样) version:版本号 x.x.x 例如 1.2.3 1 大版本:当这个包有巨大内容变化时( ...

  9. js 继承的几种方式

    JS继承的实现方式: 既然要实现继承,那么首先我们得有一个父类,代码如下: function Animal(name) { // 属性 this.name = name || '小白'; // 实例方 ...

  10. mysql/mariadb学习记录——查询3(AVG、SUM、COUNT)函数

    AVG() 求平均数函数: //求emp表中的sal属性的平均值 mysql> select avg(sal) as salAverage from emp; +-------------+ | ...