turn.js 试用

• 最近项目想要一个类似于书翻页的效果，baidu了好多终于找到一个插件turn.js，点进github发现竟然是大佬十年前的作品！！！
• turn.js 可自行下载，记得引用jq和turn.js

<div id="magazine">
	<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>
1
2
3
4
5
6
7
8

<script type="text/javascript">
	$(window).ready(function() {
		$('#magazine').turn({
				display: 'double',  // 获取当前显示的是单页还是双页
				acceleration: true,  // 设置硬件加速模式，对于触摸设备，此值必须为true
				gradients: !$.isTouch,  // 翻页过程中显示渐变和阴影
				elevation:50,  // 转换期间页面的高度
				when: {
					turned: function(e, page) {
						// 翻页后做一些什么事
					},
					turning: function(e, page) {
						// 翻页时做一些什么事
					},
				}
			});
	});

	//  键盘翻页
	$(window).bind('keydown', function(e){
		if (e.keyCode==37)
			$('#magazine').turn('previous');  // 上一页
		else if (e.keyCode==39)
			$('#magazine').turn('next');   // 下一页
	});

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 附上一张完成效果
• 
• 不足之处望大佬指出