turn.js教程及总结

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

turn简介

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

使用所需

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

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) {
				
	        }
	    }
	});

以上就是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>

效果图

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;
	}

turn常用配置项

名称	介绍	默认值	可选值
acceleration	是否启动硬件加速，移动端必须设置为true否则将不可使用	false	true/false
autoCenter	是否自动居中	false	true/false
direction	翻页方向	ltr	ltr(从左到右) / rtl(从右到左)
display	显示模式	double	single(单页) / double(双页码)
duration	过渡时间	600ms	infinite
gradients	是否显示翻页阴影效果	true	true / false
height	高度	无	infinite
pages	页码总数	无	infinite
when	监听事件	无	下方有介绍
disable	是否禁止翻页	false	true / false

when 常用监听事件

监听事件名	介绍
turning	翻页前触发
turned	翻页后触发
start	页面开始时触发
end	页面停止时触发
first	第一页触发
last	最后一页触发

turn 常用方法

名称	用途	参数
page	跳转到某一页	容器元素.turn(‘page’, 页码)
addpage	在容器中添加页码	容器元素.turn(‘addpage’, 元素, 页码)
destroy	删除所有页面	容器元素.turn(“destroy”).remove()
next	下一页	容器元素.turn(“next”)
previous	上一页	容器元素.turn(“previous”)
removepage	删除指定页	容器元素.turn(“removepage”, 页码)
version	获取当前发布版本	容器元素.turn(“version”)
stop	停止当前过渡效果，可以搭配page方法使用在跳转到某一页时停止效果	容器元素.turn(‘page’, 页码).stop()

以上就是trun的教程了。

总结

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

结语

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