Turn.js 实现翻书效果
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 实现翻书效果的更多相关文章
- turn.js实现翻书效果
JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...
- Turn.js 实现翻书效果的学习与总结
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...
- JQuery的turn.js实现翻书效果
前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...
- Turn.js 实现翻书效果(自适应单双页)
来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...
- turn.js 图书翻页效果
今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 三 个地方要改动: 1.后台查出地址 注意的地方:1.地址要 ...
- jQuery中turn.js（翻页效果）学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- 静态书架和js模拟翻书效果
书籍图片随便找了个,有点难看,须要的自己替换个好看点的png格式图片 源代码下载:http://download.csdn.net/detail/sweetsuzyhyf/7604091
- JS实现图片翻书效果示例代码
js 图片翻书效果. picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- JS实现图片翻书效果
picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...
随机推荐
- C语言-郝斌笔记-003数据类型
基本类型数据 整数 整型 —— int --4字节 短整型 —— short int ——2字节 长整型 —— long int ——8字节 浮点数[实 ...
- 高性能MySQL笔记-第5章Indexing for High Performance-001B-Tree indexes(B+Tree)
一. 1.什么是B-Tree indexes? The general idea of a B-Tree is that all the values are stored in order, and ...
- GNU Gettext
一.简介 当前,无论是商业还是免费软件都是英文的,并用英文做为文档.直到现在,为使其它非英语语言用户也能够进行交互所做的工作仍然不足,所以这对非英语语言的国家很不利.然而,随着GNU gettext工 ...
- 数字图像处理实验（1）：PROJECT 02-01， Image Printing Program Based on Halftoning 标签： 图像处理MATLAB 2017-04-2
实验要求: Image Printing Program Based on Halftoning Objective: To know in principle what is "halft ...
- Xamarin Mono for VS开发窗体标题(Title)乱码解决方案
利用mono for VS开发一个手机程序,结果只有窗体的标题 title部分是乱码,其他所有地方中文都显示正常,很郁闷.百度很久无果.最后发现只要在 VS菜单中 的 文件->高级保存选型中奖编 ...
- DBUtils工具类和DBCP连接池
今日内容介绍 1.DBUtils2.处理结果集的八种方式3.连接池4.连接池的用法1 PrepareStatement接口预编译SQL语句 1.1 预处理对象 * 使用PreparedStatemen ...
- [译]学习Javascript的工具
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- execve(".. ",[".. ",".. "],[/* ..*/])第二个 参数 数组硬传
strace.第一次跟踪点东西的启动. 第一次看见..execve(".. ",[".. ",".. "],[/* ..*/]) 第二个 参 ...
- Java NIO学习笔记
Java NIO学习笔记 一 基本概念 IO 是主存和外部设备 ( 硬盘.终端和网络等 ) 拷贝数据的过程. IO 是操作系统的底层功能实现,底层通过 I/O 指令进行完成. 所有语言运行时系统提供执 ...
- cron定时备份数据库
1.定时备份数据库 shell 脚本 #!/bin/bash # export and backup the abgent_web database.sql mysqldump -uusername ...