VUE翻书效果（turn.js，仿真折角过渡）

1、效果图

2、turn.js下载

http://www.turnjs.com/http://www.turnjs.com/

3、安装JQ

turn.js依赖JQ库，安装JQ，vue工程安装JQ

npm install jquery --save

4、使用的dom引入JQ，再引入turn.js

import $ from 'jquery'
import turn from '@/utils/turn.js'

5、完整JS 

<script>
	import $ from 'jquery'
	import turn from '@/utils/turn.js'
	export default {
		name: 'Home',
		data() {
			return {
				imagesList: [require('@/assets/1.jpg'), require('@/assets/2.jpg'), require('@/assets/3.jpg'), require(
					'@/assets/4.jpg'), require('@/assets/5.jpg'), require('@/assets/6.jpg'), require(
					'@/assets/7.jpg')]
			}
		},
		mounted() {
			let that = this
			// setTimeout(function() {
				that.onTurn();
			// }, 1000)
		},
		methods: {
			onTurn() {
				this.$nextTick(() => {
					$('#turnpage').turn({
						acceleration: true, //启用硬件加速,移动端有效
						display: 'double', //显示：single=单页，double=双页，默认双页
						duration: 800, // 翻页撒开鼠标，页面的延迟
						page: 1, // 默认显示第几页					
						gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
						autoCenter: true, //
						turnCorners: 'bl,br', // 设置可翻页的页角(都试过了，乱写 4个角都能出发卷起)， bl,br   tl,tr   bl,tr 
						height: 700, //页面高度
						width: 1000 //翻书范围宽度，总宽度
					})
				})
			},
		}
	}
</script>

如果是显示页数：

<div id="turnpage" class="turnpage">
				<div v-for="(item,index) in imagesList" :key="index"
					:style="` background:url(${item}) no-repeat 100% 100%; background-size:100% 100%;height:100px;`">
					<div class="pagenum">第{{index+1}}页</div>
				</div>
</div>

显示效果如下：

6、完整翻书示例

VUE翻书效果（vue+ turn.js 实现翻书效果）vue+ turn.js 实现翻书效果单页/双页http://www.demodashi.com/demo/19089.html