这篇文章主要讲解了“怎么用vue2.x+turn.js实现翻书效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用vue2.x+turn.js实现翻书效果”吧！
官方网站下载源码：http://turnjs.com/
找到里面的文件 lib/turn.js
放到新建的utils文件里面
Turn.js是使用了jquery书写的，使用vue中要引入jquery
计算
安全
数据库
网络和加速
企业服务
npm install --save jquery新建vue.config.js配置文件
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
//引入ProvidePlugin
config.plugin("provide").use(webpack.ProvidePlugin, [{
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}, ]);
},
}我把官方文件引入到本地图片文件使用
查看文件的像素，在设置宽高的时候width是2倍 height不变。
使用vue文件内容
<template>
<div>
<div>
<div id="flipbook">
<div v-for="(item) in imgUrl" :key="item.index"
:style="`
background:url(${item.imgurl}) no-repeat 100% 100%
`"
>
</div>
</div>
</div>
</div>
</template>
<script>
//turn.js
import turn from '../utils/turn.js'
export default {
name: 'Home',
data(){
return{
imgUrl:[
{imgurl:'image/1.jpg',index:1},
{imgurl:'image/2.jpg',index:2},
{imgurl:'image/3.jpg',index:3},
{imgurl:'image/4.jpg',index:4},
{imgurl:'image/5.jpg',index:5},
{imgurl:'image/6.jpg',index:6},
{imgurl:'image/7.jpg',index:7},
{imgurl:'image/8.jpg',index:8},
{imgurl:'image/9.jpg',index:9},
{imgurl:'image/10.jpg',index:10},
{imgurl:'image/11.jpg',index:11},
{imgurl:'image/12.jpg',index:12},
]
}
},
methods:{
onTurn(){
this.$nextTick(()=>{
$("#flipbook").turn({
autoCenter: true,
height:646,
width:996,
});
})
}
},
mounted(){
this.onTurn();
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.home{
width: 100vw;
height: 100vh;
.turnClass{
display: flex;
margin: 0px auto;
width: 996px;
height: 646px;
padding: calc((100vh - 646px)/2) 0;
overflow: hidden;
}
}
</style>感谢各位的阅读，以上就是“怎么用vue2.x+turn.js实现翻书效果”的内容了，经过本文的学习后，相信大家对怎么用vue2.x+turn.js实现翻书效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
