利用vue+turn.js實現翻書效果完整實例
更新時間：2024年01月18日 11:17:31 作者：西安未央
這篇文章主要給大家介紹了關于利用vue+turn.js實現翻書效果的相關資料,turn.js是使用了jquery書寫的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
概述
vue+ turn.js 實現翻書效果 單頁/雙頁
詳細
一、運行效果
二、項目目錄
三、項目引入turn.js或者turn.min.js
①、官方下載地址:Turn.js: The page flip effect in HTML5
主要是用到 turn.js或者turn.min.js
在vue工程中新建utils文件夾，存放這個第三方js（當然任意放也行，能找到就行），如下圖：
②、安裝JQ
用turn.js，基于JQuery項目已有JQ則跳過。
npm install jquery --save
vue.config.js中配置jq：
const webpack = require('webpack');
module.exports = {
lintOnSave: false,
//配置webpack選項的內容
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
})
]
},
}實例翻書頁文件路徑為 工程/src/views/Home.vue
import $ from 'jquery'
import turn from '@/utils/turn.js'四、核心方法
onTurn() {
this.$nextTick(() => {
$('#turnpage').turn({
acceleration: true, //啟用硬件加速,移動端有效
display: 'double', //顯示：single=單頁，double=雙頁，默認雙頁
duration: 800, // 翻頁撒開鼠標，頁面的延遲
page: 1, // 默認顯示第幾頁
gradients: true, // 折疊處的光澤漸變，主要體現翻頁的立體感、真實感
autoCenter: true, //
turnCorners: 'bl,br', // 設置可翻頁的頁角(都試過了，亂寫 4個角都能出發(fā)卷起)， bl,br tl,tr bl,tr
height: 700, //頁面高度
width: 1000 //翻書范圍寬度，總寬度
})
})
},調用onTurn：
mounted() {
this.onTurn();
}, 如果走正式接口，圖片數組請求慢，需要延遲調用
mounted() {
let that = this
setTimeout(function() {
that.onTurn();
}, 1000)
},總結
到此這篇關于利用vue+turn.js實現翻書效果的文章就介紹到這了,更多相關vue turn.js實現翻書效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了Vue實現一個返回頂部backToTop組件，可以實現回到頂部效果，具有一定的參考價值，有興趣的可以了解一下2017-07-07
因為項目需要，近期做了一個公眾號網頁開發(fā)。在此期間也踩了一些坑，解決這些坑之后，準備對這個項目進行復盤。記錄下項目從開發(fā)到上線所解決的問題，并對使用vue進行公眾號開發(fā)的步驟進行一個總結。方便以后有問題進行查閱。希望對你有所幫助2021-05-05
這篇文章主要為大家詳細介紹了Vue組件簡易模擬實現購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章教大家如何分分鐘玩轉Vue.js組件,完善了vue.js組件的學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了vue3與ts組件封裝提高代碼復用性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
最近學習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
這篇文章主要介紹了如何在 vue3 中使用高德地圖,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2020-04-04
這篇文章主要為大家詳細介紹了Vue實現省市區(qū)級聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue項目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險的,所以就需要前端一些加密協(xié)議,對密碼、手機號、身份證號等信息進行保護,下面這篇文章主要給大家介紹了關于vue項目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關資料,需要的朋友可以參考下2022-12-12