利用vue+turn.js實(shí)現(xiàn)翻書效果完整實(shí)例
更新時(shí)間：2024年01月18日 11:17:31 作者：西安未央
這篇文章主要給大家介紹了關(guān)于利用vue+turn.js實(shí)現(xiàn)翻書效果的相關(guān)資料,turn.js是使用了jquery書寫的,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
概述
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ù)組請求慢，需要延遲調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件
本篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件，可以實(shí)現(xiàn)回到頂部效果，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
因?yàn)轫?xiàng)目需要，近期做了一個(gè)公眾號(hào)網(wǎng)頁開發(fā)。在此期間也踩了一些坑，解決這些坑之后，準(zhǔn)備對這個(gè)項(xiàng)目進(jìn)行復(fù)盤。記錄下項(xiàng)目從開發(fā)到上線所解決的問題，并對使用vue進(jìn)行公眾號(hào)開發(fā)的步驟進(jìn)行一個(gè)總結(jié)。方便以后有問題進(jìn)行查閱。希望對你有所幫助2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue組件簡易模擬實(shí)現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了vue3與ts組件封裝提高代碼復(fù)用性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟
最近學(xué)習(xí)在vite項(xiàng)目中配置less,本文主要介紹了Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
這篇文章主要介紹了如何在 vue3 中使用高德地圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2020-04-04
Vue實(shí)現(xiàn)省市區(qū)級聯(lián)下拉選擇框
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)級聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對密碼、手機(jī)號(hào)、身份證號(hào)等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12