利用vue+turn.js實(shí)現(xiàn)翻書效果完整實(shí)例
概述
vue+ turn.js 實(shí)現(xiàn)翻書效果 單頁/雙頁
詳細(xì)
一、運(yùn)行效果
二、項(xiàng)目目錄
三、項(xiàng)目引入turn.js或者turn.min.js
①、官方下載地址:Turn.js: The page flip effect in HTML5
主要是用到 turn.js或者turn.min.js
在vue工程中新建utils文件夾，存放這個(gè)第三方j(luò)s（當(dāng)然任意放也行，能找到就行），如下圖：
②、安裝JQ
用turn.js，基于JQuery項(xiàng)目已有JQ則跳過。
npm install jquery --save
vue.config.js中配置jq：
const webpack = require('webpack');
module.exports = {
lintOnSave: false,
//配置webpack選項(xiàng)的內(nèi)容
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
})
]
},
}實(shí)例翻書頁文件路徑為 工程/src/views/Home.vue
import $ from 'jquery'
import turn from '@/utils/turn.js'四、核心方法
onTurn() {
this.$nextTick(() => {
$('#turnpage').turn({
acceleration: true, //啟用硬件加速,移動(dòng)端有效
display: 'double', //顯示：single=單頁，double=雙頁，默認(rèn)雙頁
duration: 800, // 翻頁撒開鼠標(biāo)，頁面的延遲
page: 1, // 默認(rèn)顯示第幾頁
gradients: true, // 折疊處的光澤漸變，主要體現(xiàn)翻頁的立體感、真實(shí)感
autoCenter: true, //
turnCorners: 'bl,br', // 設(shè)置可翻頁的頁角(都試過了，亂寫 4個(gè)角都能出發(fā)卷起)， bl,br tl,tr bl,tr
height: 700, //頁面高度
width: 1000 //翻書范圍寬度，總寬度
})
})
},調(diào)用onTurn：
mounted() {
this.onTurn();
}, 如果走正式接口，圖片數(shù)組請(qǐng)求慢，需要延遲調(diào)用
mounted() {
let that = this
setTimeout(function() {
that.onTurn();
}, 1000)
},總結(jié)
到此這篇關(guān)于利用vue+turn.js實(shí)現(xiàn)翻書效果的文章就介紹到這了,更多相關(guān)vue turn.js實(shí)現(xiàn)翻書效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-01-01
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯(cuò)誤問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue詳細(xì)的入門筆記，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
vue-router報(bào)錯(cuò):uncaught error during route
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
由于一些演示需要對(duì)一些簡(jiǎn)單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下2024-02-02
vue2.0+elementui實(shí)現(xiàn)一個(gè)上門取件時(shí)間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實(shí)現(xiàn)一個(gè)上門取件時(shí)間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時(shí)間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個(gè)簡(jiǎn)單的,需要的朋友可以參考下2024-02-02
Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作，對(duì)Vue感興趣的同學(xué)，可以來學(xué)習(xí)一下2021-05-05
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue頁面打印printjs實(shí)現(xiàn)與進(jìn)階方案推薦教程
PrintJS是一個(gè)輕量級(jí)的JavaScript庫,可以幫助我們輕松實(shí)現(xiàn)網(wǎng)頁打印功能,它支持打印HTML元素、JSON數(shù)據(jù)、圖片等多種格式,使用簡(jiǎn)單且功能強(qiáng)大,這篇文章主要介紹了vue頁面打印printjs實(shí)現(xiàn)與進(jìn)階方案的相關(guān)資料,需要的朋友可以參考下2026-06-06