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

这部分主要用作演示及养眼接下来我们来抛开演示图来讲一下如何使用

turn简介

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

使用所需

jquery.js、turn.js
这里面jquery全网一查都是, turn.js官网下载太慢了，嫌慢的码友们可以私信我或留言我会发给大家

基本用法

    $('#book').turn({acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为truepages: 11, // 页码总数elevation: 50, // 这个忘记是什么了height: 200, // 高度 单位 pxgradients: 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的教程了。

总结

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

结语

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

turn.js教程及总结相关推荐

uni-app h5、app模式下集成turn.js 翻书动画
uni-app 集成turnjs 翻书动画 h5 页面引入JQuery.turn.js 工具类文件,注意引入的顺序 import '@/utils/jquery.min.1.7.js'; impor ...
图书浏览界面html代码,javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐turn.js 网上的turn.js 有api 不过是英文的很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn ...
riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
Vue.js教程视频
Vue.js教程视频链接 https://www.bilibili.com/video/av32611687/?p=1 https://www.bilibili.com/video/av3261168 ...
swiper 在turn.js不能滚动
这个问题,使用turn.js的同学一定遇到过,那怎么解决呢? 答案: 翻到对应包含swiper 的那页,重新初始化swiper 假设这个是第3页 <div class="page-co ...
vue引入turn.js
github地址: https://github.com/blasten/turn.js (1) 首先要全局引入jquery 这里我们使用vue-cli3 搭建的项目,所以使用链式引入 vue.con ...
10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
Node.js 教程
菜鸟教程:https://www.runoob.com/nodejs/nodejs-tutorial.html node js 官网:https://nodejs.org/en/download/ 廖 ...
prototype.js教程及prototype中文手册
在线API文档: http://www.prototypejs.org/api 1.4网页版: http://thinhunan.cnblogs.com/archive/2006/04/01/De ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

turn.js教程及总结