turn.js 一个神奇的js组件,实现纸质书的翻页效果

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

欢迎关注本站,共同学习进步!