利用vue+turn.js實現(xiàn)翻書效果完整實例

更新時間：2024年01月18日 11:17:31 作者：西安未央

這篇文章主要給大家介紹了關(guān)于利用vue+turn.js實現(xiàn)翻書效果的相關(guān)資料,turn.js是使用了jquery書寫的,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

概述

vue+ turn.js 實現(xiàn)翻書效果單頁/雙頁

詳細(xì)

一、運行效果

二、項目目錄

三、項目引入turn.js或者turn.min.js

①、官方下載地址:Turn.js: The page flip effect in HTML5

主要是用到 turn.js或者turn.min.js

在vue工程中新建utils文件夾，存放這個第三方j(luò)s（當(dāng)然任意放也行，能找到就行），如下圖：

②、安裝JQ

用turn.js，基于JQuery項目已有JQ則跳過。

npm install jquery --save

vue.config.js中配置jq：

const webpack = require('webpack');
module.exports = {
    lintOnSave: false,
    //配置webpack選項的內(nèi)容
    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=雙頁，默認(rèn)雙頁
            duration: 800, // 翻頁撒開鼠標(biāo)，頁面的延遲
            page: 1, // 默認(rèn)顯示第幾頁                 
            gradients: true, // 折疊處的光澤漸變，主要體現(xiàn)翻頁的立體感、真實感
            autoCenter: true, //
            turnCorners: 'bl,br', // 設(shè)置可翻頁的頁角(都試過了，亂寫 4個角都能出發(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實現(xiàn)翻書效果的文章就介紹到這了,更多相關(guān)vue turn.js實現(xiàn)翻書效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2023-01-01
Vue Router history模式的配置方法及其原理
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
關(guān)于Vue背景圖打包之后訪問路徑錯誤問題的解決
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯誤問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
Vue詳細(xì)的入門筆記
這篇文章主要介紹了Vue詳細(xì)的入門筆記，對Vue感興趣的同學(xué)，可以參考下
2021-05-05
vue-router報錯:uncaught error during route
這篇文章主要介紹了vue-router報錯:uncaught error during route navigati問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue引用public文件夾中文件的多種方式
由于一些演示需要對一些簡單頁面進行配置,由于打包build后的vue項目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下
2024-02-02
vue2.0+elementui實現(xiàn)一個上門取件時間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時間看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下
2024-02-02
Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之開發(fā)環(huán)境的準(zhǔn)備工作，對Vue感興趣的同學(xué)，可以來學(xué)習(xí)一下
2021-05-05
vue中如何利用js函數(shù)截取時間的年月日時分秒
時分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因為月是1-12月,而時分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時間的年月日時分秒的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue頁面打印printjs實現(xiàn)與進階方案推薦教程
PrintJS是一個輕量級的JavaScript庫,可以幫助我們輕松實現(xiàn)網(wǎng)頁打印功能,它支持打印HTML元素、JSON數(shù)據(jù)、圖片等多種格式,使用簡單且功能強大,這篇文章主要介紹了vue頁面打印printjs實現(xiàn)與進階方案的相關(guān)資料,需要的朋友可以參考下
2026-06-06