Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang cara vue2.x turn.js mencapai kesan perubahan buku
Bagaimana untuk mencapai kesan pusingan buku dalam vue2.x turn.js? Artikel berikut akan memperkenalkan kepada anda cara menggunakan turn.js dalam vue2.x dan mencapai kesan membalikkan buku saya harap ia akan membantu anda.
Pratonton kesan:
Kod sumber muat turun tapak web rasmi: http://turnjs.com/
Cari fail lib/turn.js
Letakkannya dalam fail utils yang baru dibuat
Turn.js ditulis menggunakan jquery, anda perlu memperkenalkan jquery
npm install --save jquery
Buat fail konfigurasi vue.config.js baharu
const webpack = require('webpack') module.exports = { chainWebpack: config => { //引入ProvidePlugin config.plugin("provide").use(webpack.ProvidePlugin, [{ $: "jquery", jquery: "jquery", jQuery: "jquery", "window.jQuery": "jquery", }, ]); }, }
Saya memperkenalkan fail rasmi ke dalam fail imej tempatan menggunakan
untuk melihat piksel fail, dalam tetapan Apabila lebar dan ketinggian ditukar, lebar adalah 2 kali tinggi dan kekal tidak berubah.
Gunakan kandungan fail vue
<template> <div> <div> <div id="flipbook"> <div v-for="(item) in imgUrl" :key="item.index" :style="` background:url(${item.imgurl}) no-repeat 100% 100% `" > </div> </div> </div> </div> </template> <script> //turn.js import turn from '../utils/turn.js' export default { name: 'Home', data(){ return{ imgUrl:[ {imgurl:'image/1.jpg',index:1}, {imgurl:'image/2.jpg',index:2}, {imgurl:'image/3.jpg',index:3}, {imgurl:'image/4.jpg',index:4}, {imgurl:'image/5.jpg',index:5}, {imgurl:'image/6.jpg',index:6}, {imgurl:'image/7.jpg',index:7}, {imgurl:'image/8.jpg',index:8}, {imgurl:'image/9.jpg',index:9}, {imgurl:'image/10.jpg',index:10}, {imgurl:'image/11.jpg',index:11}, {imgurl:'image/12.jpg',index:12}, ] } }, methods:{ onTurn(){ this.$nextTick(()=>{ $("#flipbook").turn({ autoCenter: true, height:646, width:996, }); }) } }, mounted(){ this.onTurn(); } } </script> <style> *{ margin: 0; padding: 0; } .home{ width: 100vw; height: 100vh; .turnClass{ display: flex; margin: 0px auto; width: 996px; height: 646px; padding: calc((100vh - 646px)/2) 0; overflow: hidden; } } </style>
Gambar kesan:
[Cadangan berkaitan: tutorial vue.js】
Atas ialah kandungan terperinci Mari kita bincangkan tentang cara vue2.x turn.js mencapai kesan perubahan buku. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!