Turn.js 实现翻书效果
2024-08-24 13:56:27
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);
最新文章
- JavaScript 控制字体大小设置
- .net 时间戳和日期互转
- 操作系统开发系列—12.e.Makefile
- java进程性能分析步骤-超越昨天的自己系列(11)
- 似是而非的k=sqrt(n)
- msf生成shellcode
- Navicat 导入数据报错 --- 1153 - Got a packet bigger than &#39;max_allowed_packet&#39; bytes
- SAP CRM 最新简介文字(2007年、中英文)
- 一步步学习ASP.NET MVC3 (3)——Razor(1)
- canvas 渐变
- jQueryMobile之Popup
- 树形控件CTreeCtrl的使用
- Oracle如何插入在特殊字符: &;amp; 和 &;#39; (各种解决方案)
- JAVA基础--接口 interface
- 【Flask】 利用uWSGI和Nginx发布Flask应用
- Java框架spring学习笔记(十七):事务操作
- Python-网络爬虫模块-requests模块之响应-response
- 安装和激活Office 2019
- 187. Repeated DNA Sequences重复的DNA子串序列
- nginx tomcat https
热门文章
- vray学习笔记(2)vray工作流程
- ZROI2018提高day4t3
- 前端基础 之JS
- etl 获取列数据类型
- SSH2+proxool 出现No suitable driver found for proxool.mysqlProxool
- [转]关于截取字符串substr和substring两者的区别
- C#泛型理解(一)
- Python 中 os.path 模块的运用
- django 学习之DRF (二)
- Windows Server 2016 IIS10安装URLRewrite 2.0组件方法