利用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書寫的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

概述

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

詳細(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則跳過(guò)。

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í)例翻書頁(yè)文件路徑為工程/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=單頁(yè)，double=雙頁(yè)，默認(rèn)雙頁(yè)
            duration: 800, // 翻頁(yè)撒開鼠標(biāo)，頁(yè)面的延遲
            page: 1, // 默認(rèn)顯示第幾頁(yè)                 
            gradients: true, // 折疊處的光澤漸變，主要體現(xiàn)翻頁(yè)的立體感、真實(shí)感
            autoCenter: true, //
            turnCorners: 'bl,br', // 設(shè)置可翻頁(yè)的頁(yè)角(都試過(guò)了，亂寫 4個(gè)角都能出發(fā)卷起)， bl,br   tl,tr   bl,tr 
            height: 700, //頁(yè)面高度
            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)文章

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