turn.js教程及总结_turn.js 中文教程

先看一眼我制作的简单demo演示图

turn简介

一个基于jquery用来实现3d翻书效果的插件
1

使用所需

jquery.js、turn.js
这里面jquery全网一查都是, turn.js官网下载太慢了，可通过点击下方的链接进行下载
1
2

demo下载

基本用法

    $('#book').turn({
        acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
		pages: 11, // 页码总数
		elevation: 50, // 这个忘记是什么了
		height: 200, // 高度 单位 px
		gradients: true, // 是否显示翻页阴影效果
		when: {
			// 翻页前触发
			turning: function (e, page, view) {
	                    
			},
	                // 翻页后触发
			turned: function (e, page) {
				
	        }
	    }
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以上就是js的基本用法了，只需要创建一个容器元素和一些代表页码的子元素就可以实现基本的翻书效果了

    <div id="book">
		<div class="odd" id="page1"></div>
		<div class="even" id="page2"></div>
		<div class="odd" id="page3"></div>
		<div class="even" id="page4"></div>
    </div>
1
2
3
4
5
6

效果图

css样式

	#book {
		width: 90vw;
		margin: 0 auto;
		box-shadow: 0 0 15px #4d4c4c;
	}

	#book .turn-page {
		background-color: white;
	}

	#book .cover {
		background: #333;
	}

	#book .cover h1 {
		color: white;
		text-align: center;
		font-size: 50px;
		line-height: 500px;
		margin: 0px;
	}

	#book .loader {
		/* background-image: url(loader.gif); */
		width: 24px;
		height: 24px;
		display: block;
		position: absolute;
		top: 238px;
		left: 188px;
	}

	#book .data {
		text-align: center;
		font-size: 40px;
		color: #999;
		line-height: 500px;
	}

	#book .odd {
		background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
		box-shadow: 0 0 15px #4d4c4c;
	}

	#book .even {
		background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
		box-shadow: 0 0 15px #4d4c4c;
	}
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

turn常用配置项

when 常用监听事件

turn 常用方法

以上就是trun的教程了。

总结

这真的是一款非常优秀的插件，短短几行就解决了我的业务需求，而且细节处理的非常棒，翻书的阴影效果、翻书到一定角度带来的直角、翻书的效果等，很推荐有要做类似效果的码友们使用，其拓展性极强，甚至可以完全做成一本可以真正意义上的书。

结语

   天才无非是长久的忍耐，努力吧!
1