这篇文章主要讲解了“怎么用vue2.x+turn.js实现翻书效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vue2.x+turn.js实现翻书效果”吧!
成都创新互联公司是一家专注于网站设计制作、成都网站制作与策划设计,陇川网站建设哪家好?成都创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:陇川等地区。陇川做网站价格咨询:18982081108
官方网站下载源码: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实现翻书效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网页题目:怎么用vue2.x+turn.js实现翻书效果
路径分享:https://www.cdcxhl.com/article0/isjgio.html
成都网站建设公司_创新互联,为您提供网站收录、云服务器、、网站设计公司、网站策划、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联