前言
不知道你们是否遇到这种需求,要求页面翻页实现一个模拟翻书的动画效果,对于这种需求有几种实现思路,我都尝试过,用纯css实现的会有一点生硬,用js和css实现的需要考虑很多适配的问题,后面再网上找了一个插件:turn.js,这个插件非常的好用。
我这里主要讲的是vue里面使用这个插件,其他框架类似,对于纯HTML开发的直接script引入即可
一、使用步骤
turn.js官网,turn.js是一款实现翻页效果的插件:
1、首先需要安装并引入jQuery(npm install jquery --save)
2、在官网下载turn.js 到本地,在项目中新建utils文件,把turn.js文件拷到utils中
3、开始引入,代码如下(示例):
import $ from 'jquery'
//这个地址看自己放的位置在哪里
import turn from '../utils/turn'
4、到这里之后,你会发现运行项目后页面开始报错,会报turn定义但未使用的错,这个是jQuery引用有问题导致的,网上有一些解决方法,但是都比较麻烦,需要去改vue.config.js配置文件,我不建议这样做
5、现在讲讲我的方法:
在turn.js的源代码里面加一行代码即可
import jQuery from "jquery";
6、完成上面的步骤就可以开始使用这个翻书动画效果插件啦!!这个是一个简单的示例,具体的其他效果见官网
<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>
二、总结
以上就是今天我分享的内容,如果后面还有其他炫酷的前端页面翻书动画效果,我也会分享给大家的,后面有空我会写一个示例代码上传到资源里面,你们后面可以直接在我的资源里面下载。