turn.js是一个javascript库,利用html5使网页内容看起来像一本真正的书一样。官方地址:https://turnjs.com
要求:最新版turn.js要求jquery1.7+
浏览器支持:
- Safari for iOS(iPad、iPhone、iPod)
- Safari 5
- Chrome 11
- Chrome for Android
- Firefox 9
- IE 9
- IE 8(using turn.html4.js)
使用非常简单:
引入相关的js文件之后,只需如下代码:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
trun函数的参数还有以下这些:
- acceleration 设置硬件加速模式,对于触摸设备,此值必须为true
- autoCenter 根据多少页面可见是否将动画居中显示,默认值为false
- display 设置显示模式‘single’为单页模式,‘double’为双页模式默认为单页
- duration设置动画时长,单位为毫秒,默认值为600
- gradients显示变化过程的渐变和阴影,默认为true
- height显示区域的高度值
- page设置第一页 默认为1
- pages设置总共有几页
- when设置事件监听器
- width设置宽度
- zoom 设置当前的缩放比例
更多参数及事件参照详细pdf文档连接:https://turnjs.com/turnjs4-api-docs.pdf
欢迎关注本站,共同学习进步!